web-dev-qa-db-fra.com

Comment définir le thème de l'application Flutter sur sombre par défaut?

J'ai créé une interface utilisateur de connexion simple en flutter, mais je ne sais pas comment rendre le thème général de l'application aussi sombre. Ce que je veux dire, c'est qu'à l'avenir, si j'ajoute plus de fonctionnalités à l'application, tout devrait être dans le thème sombre. Y'a-t'il un quelconque moyen d'y arriver?

J'ai utilisé un fichier Dart séparé (login.Dart) et tous les widgets utilisés dans mon interface utilisateur de connexion sont dans ce fichier. J'ai défini ThemeData comme sombre dans le fichier Dart principal (main.Dart), mais l'application fonctionne toujours dans le thème clair.

Voici mon code:

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: () {

                                    },
                                )
                            ],
                        )

                    ],
                ),
            ),
        );
    }
}
androidflutterdartflutter-theme
2
CodeSadhu

Vous devez utiliser ThemeMode

  • Décrit quel theme sera utilisé par MaterialApp.

CODE D'ÉCHANTILLON 

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.

Comment utiliser ThemeMode dans MaterialApp

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

          ) ),
    );
4
Nilesh Rathod