Flutter - Dark Theme - GeeksforGeeks

17 Feb, 2021
Nowadays almost all the mobile application uses a dark theme, for example, Instagram, Whatsapp, Youtube, etc. It’s easy to implement in Flutter, Just a few lines of code require to achieve this. But before doing that let’s explore some important concept in flutter which are used to achieve the dark theme
ThemeData class defines the theme for App. It’s used inside MaterialApp, It helps to configure the appearance of the entire app. We can override it as per our requirement and make changes.
Now let’s dig into the code and explore the new things in the ThemeData class.
Dart
MaterialApp( theme: ThemeData(   primaryColor: Colors.blue,   accentColor: Colors.yellow,   textTheme: TextTheme(bodyText2: TextStyle(color: Colors.purple)), ),   home: Scaffold(   appBar: AppBar(     title: const Text('ThemeData Example'),   ),     floatingActionButton: FloatingActionButton(     child: const Icon(Icons.add),     onPressed: () {},   ),     body: Center(     child: Text(       'Geeks For Geeks',     ),   ), ),)
1. Brightness :  
Describes the contrast of a theme or color palette.
Example:
Dart
ThemeData(   brightness:Brightness.light, ),  ThemeData(   brightness:Brightness.light, )
2. visualDensity :  
Visual density is the vertical and horizontal “compactness” of the components in the UI. Note: horizontal and vertical density must be less than or equal to max Horizontal or MaximumVeriticalDensity i.e.  4.0
Example:
Dart
ThemeData( brightness: Brightness.light, visualDensity: VisualDensity(   horizontal: 2.0,   vertical: 2.0 )),
3. primaryColor : 
Defines the primary color for the app, similarly, we can define the primary color for a light theme and a dark theme.
Example:
Dart
ThemeData( primaryColor: Colors.blue,),
Similarly, we can define the accentColor, accentColorLight, accentColorDark, feel free to use them in your app.
4. IconThemeData: 
Defines the color, opacity, and size of icons.
Dart
ThemeData( iconTheme: IconThemeData(   color: Colors.amber,   size: 15.0,   opacity: 10 )),
Similarly, you can have other properties in flutter official docs. I personally recommend visiting at least once in Flutter official docs.
Now we get enough knowledge to accomplish our goal, let’s get started. We are going to use the Provider package, this is not mandatory we can do the dark theme implementation without Provider But for better architecture, we are using it. Add provider package into pubspec.yaml file.
This is our main class the execution starts from this class. Just take a look at the theme properties of the MaterialApp(), all the things we have discussed above are written here, I guess you get some clarity here.
Dart
import 'package:dark_theme_app/Button_tap_listener.dart';import 'package:dark_theme_app/dark_theme_screen.dart';import 'package:flutter/material.dart';import 'package:provider/provider.dart';    void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {      // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return ChangeNotifierProvider<ButtonTapListenerClass>(      create: (context) => ButtonTapListenerClass(),      child: MaterialApp(        debugShowCheckedModeBanner: false,        title: 'Flutter Demo',                  // Themes        darkTheme: ThemeData.dark(),        home: DarkThemeExample(),        theme: ThemeData(            brightness: Brightness.dark,            visualDensity: VisualDensity(horizontal: 2.0, vertical: 2.0),            primaryColorLight: Color(0xff03203C),            primaryColorDark: Color(0xff242B2E),                        // Icon Theme            iconTheme:                IconThemeData(color: Colors.amber, size: 15.0, opacity: 10),            accentColor: Colors.amber,            accentColorBrightness: Brightness.light),      ),    );  }}
This class contains our UI part of the app, when we tap on the bulb image it will call the clickEvent() which is defined in our business class. Here we just toggle one boolean variable to get a dark theme and light theme. 
Dart
import 'package:dark_theme_app/Button_tap_listener.dart';import 'package:flutter/material.dart';import 'package:provider/provider.dart';  class DarkThemeExample extends StatefulWidget {  @override  _DarkThemeExampleState createState() => _DarkThemeExampleState();}  class _DarkThemeExampleState extends State<DarkThemeExample> {  @override  Widget build(BuildContext context) {          // initialise the provider class    final object = Provider.of<ButtonTapListenerClass>(context);    return Scaffold(      backgroundColor: object.isClicked          ? Theme.of(context).primaryColorDark          : Theme.of(context).primaryColorLight,              // appbar      appBar: AppBar(        backgroundColor: Colors.green,        title: Text("Geeks For Geeks"),        centerTitle: true,      ),      body: Container(        margin: EdgeInsets.symmetric(horizontal: 150.0),        child:  GestureDetector(          child: object.isClicked              ? Image.asset(            "assets/light.png",            height: 450.0,          )              : Image.asset(            "assets/dark.png",            height: 450.0,          ),          onTap: () {            object.clickEvent();          },        ),      ),    );  }}
This class is the business class that is we do all the business logic or operation here. For our example, the functionality of this class is less, But this is the right approach to separate our UI and business logic & follow good architecture to build an app.
In this class, we extend the ChangeNotifier class which is in the provider package. Just notice the clickEvent() , there we are using notifyListner(). When we call this function we just tell the listeners to rebuild it to get updated value or new value. In our case, we just toggle the boolean value. By looking at it, you can think in this way this is a mess, why we do all these things for this small app. But believe me, we need to follow at least one architecture pattern. If you do not want to use it feel free to use a simple approach.
Dart
import 'package:flutter/material.dart';  class ButtonTapListenerClass extends ChangeNotifier {  bool isClicked = false;    void clickEvent() {    isClicked = !isClicked;    notifyListeners();  }}
dark theme(tap on the bulb)
light theme(Tap on the bulb)
android
Flutter
Flutter UI-components
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Flexible Widget
Flutter - Stack Widget
Android Studio Setup for Flutter Development
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs