Tien Do Nam
Tien Do Nam

Reputation: 4450

Flutter: Dark Theme on iOS

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

Upvotes: 2

Views: 2340

Answers (1)

Bruno Miguens
Bruno Miguens

Reputation: 367

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.

Upvotes: 2

Related Questions