androidflutterdartflutter-theme

How to set Flutter app theme as to dark by default?


I've created a simple login UI in Flutter, but I don't know how to make the overall theme of the app as dark. What I mean is that in the future, if I add more functionality to the app, it should all be in the dark theme. Is there any way to do that?

I've used a separate dart file (login.dart) and all the widgets used in my login UI are in this file. I've set the ThemeData as dark in the main Dart file (main.dart), but the app is still running in light theme. Here's my code, file 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(),
    ),
  );
}

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

                  },
                )
              ],
            )

          ],
        ),
      ),
    );
  }
}

Solution

  • You need to use ThemeMode

    SAMPLE CODE

    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.
    

    How To use ThemeMode in MaterialApp

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