Flutter: Dark Theme on iOS

1,778

Check this repo, you can create platform specific layouts only using a single widget that does all the platform specific boilerplate for you. Also have support for dark mode, at least in iOS.

Share:
1,778
Tien Do Nam
Author by

Tien Do Nam

Updated on December 15, 2022

Comments

  • Tien Do Nam
    Tien Do Nam over 1 year

    I am creating an app using Flutter. On iOS however (you can also test it on Android), dark theme is not applied. Using Android widgets, it is working fine tho.

    How can I make the Cupertino widgets using the dark theme? Especially for the popups.

    I am using Flutter 1.9.1+hotfix6

    E.g. the Cupertino "ActionSheet":

    import 'package:flutter/material.dart';
    
    import 'home.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData.dark(),
          darkTheme: ThemeData.dark(),
          home: Home(),
        );
      }
    }
    
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    class Home extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: RaisedButton(
            child: Text('test'),
            onPressed: () {
              Widget secondaryButton, confirmButton, popup;
              secondaryButton = CupertinoActionSheetAction(
                child: Text('secundary'),
                onPressed: () {},
              );
    
              confirmButton = CupertinoActionSheetAction(
                child: Text('test'),
                onPressed: () {},
              );
    
              popup = CupertinoActionSheet(
                title: Text('Title'),
                message: Text('Content'),
                cancelButton: secondaryButton,
                actions: [confirmButton],
              );
    
              showCupertinoModalPopup(
                  context: context, builder: (context) => popup);
            },
          ),
        );
      }
    }
    
    

    Screenshot:

    link