Как установить темную тему приложения Flutter по умолчанию?

Question

Я создал простой пользовательский интерфейс входа в систему в flutter, но я не знаю, как сделать общую тему приложения темной. Я имею в виду, что в будущем, если я добавлю больше функций в приложение, все это должно быть в темной теме. Есть ли способ сделать это?

Я использовал отдельный файл dart (login.dart), и все виджеты, используемые в моем пользовательском интерфейсе входа в систему, находятся в этом файле. Я установил ThemeData как темный в основном файле дротика (main.dart), но приложение все еще работает в светлой теме.

Вот мой код:

main.dart

import 'package:flutter/material.dart';
import 'package:bidder_login/login.dart';

void main(){
    runApp(
        MaterialApp(
      theme: ThemeData(),
      darkTheme: ThemeData.dark(),
            debugShowCheckedModeBanner: false,
            title: "Basic Login Demo",
            home: LoginPage(),
        ),
    );
}

login.dart

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
    @override
    _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: SafeArea(
                child: ListView(
                    padding: EdgeInsets.symmetric(horizontal: 24.0),
                    children: <Widget>[
                        SizedBox(height: 80.0),
                        // Column(
                        //  children: <Widget>[
                        //      Image.asset('assets/login_app.png'),
                        //      SizedBox(height: 25.0),
                        //      Text("Material Login"),
                        //  ],
                        // ),

                        //*Username starts here
                        SizedBox(height: 120.0),
                        TextField(
                            decoration: InputDecoration(
                                labelText: 'Username',
                                filled: true,
                            ),
                        ),

                        //*Password starts here
                        SizedBox(height: 12.0),
                        TextField(
                            decoration: InputDecoration(
                                labelText: 'Password',
                                filled: true,
                            ),
                            obscureText: true,
                        ),
                        ButtonBar(
                            children: <Widget>[
                                FlatButton(
                                    child: Text('Cancel'),
                                    onPressed: () {

                                    },
                                ),
                                RaisedButton(
                                    child: Text('Next'),
                                    onPressed: () {

                                    },
                                )
                            ],
                        )

                    ],
                ),
            ),
        );
    }
}

Answer 1

Вам нужно использовать ThemeMode

• Описывает, какие theme будет использоваться MaterialApp.

ОБРАЗЕЦ КОДА

themeMode: ThemeMode.dark,//Always use the dark mode (if available) regardless of system preference.


themeMode: ThemeMode.light,//Always use the light mode regardless of system preference.


themeMode: ThemeMode.system,//Use either the light or dark theme based on what the user has selected in the system settings.


themeMode: ThemeMode.values,//A constant List of the values in this enum, in order of their declaration.

Как пользоваться ThemeMode в MaterialApp

MaterialApp(
      debugShowCheckedModeBanner: false,
      theme:
          ThemeData(primarySwatch: Colors.blue, brightness: Brightness.light),
      themeMode: ThemeMode.dark,
      darkTheme: ThemeData(brightness: Brightness.dark),
      home: SafeArea(
          child:Scaffold(

          ) ),
    );

Answer 2

Рекомендуемый метод - использовать ColorScheme.

var mode = ThemeMode.light; // or ThemeMode.dark

MaterialApp(
  theme: ThemeData.from(colorScheme: ColorScheme.light()),
  darkTheme: ThemeData.from(colorScheme: ColorScheme.dark()),
  themeMode: mode,
  home: //...
)