Simple Way to Implement Dark Theme in Your Flutter App

#flutter #dart

Now Days Dark themes are everywhere then why not in your flutter app 🤔

Let's do it -

We are going to implement dark theme in a simple flutter app using darkTheme property of MaterialApp.

Index -

Initial UI Setup
Define Dark and Light themes
Use these themes in MaterialApp
Final Code

Initial UI Setup

Create a simple flutter app with the following code or you can create your own ui.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  TextStyle _style = TextStyle(fontSize: 55);
  bool _isDark = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
  debugShowCheckedModeBanner: false,
      title: 'Flutter Theme',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Theme Demo'),
          centerTitle: true,
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Row(
                children: [
                  Text('Happy', style: _style),
                ],
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 40),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('New', style: _style),
                  ],
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Text('Year', style: _style),
                ],
              ),
              Text('2021',
                  style: _style.copyWith(
                    color: Colors.deepOrange,
                    fontWeight: FontWeight.bold,
                  )),
              Padding(
                padding: const EdgeInsets.only(top: 80),
                child: CupertinoSwitch(
                  value: _isDark,
                  onChanged: (v) {
                    setState(() {
                      _isDark = !_isDark;
                    });
                  },
                ),
              ),
              Text('Dark'),
            ],
          ),
        ),
      ),
    );
  }
}

The above code displays Happy New Year 2021 on the screen with a switch to switch between light and dark themes.

Define Dark and Light themes

Create two ThemeData one for light theme and another for dark theme.
Here you can define your own style of themes and colors.

ThemeData _light = ThemeData.light().copyWith(
    primaryColor: Colors.green,
  );
  ThemeData _dark = ThemeData.dark().copyWith(
    primaryColor: Colors.blueGrey,
  );

In above code I have selected the primaryColor green in light mode and blueGrey in dark mode.

Use these themes in MaterialApp

In your MaterialApp widget add the following properties -

darkTheme: _dark,
theme: _light,
themeMode: _isDark ? ThemeMode.dark : ThemeMode.light,

Here we are switching our theme mode between light and dark based on the _isDark boolean variable.
That's it, Now you can run your app and play with light and dark themes.

Final Code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  TextStyle _style = TextStyle(fontSize: 55);
  bool _isDark = false;
  ThemeData _light = ThemeData.light().copyWith(
    primaryColor: Colors.green,
  );
  ThemeData _dark = ThemeData.dark().copyWith(
    primaryColor: Colors.blueGrey,
  );
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      darkTheme: _dark,
      theme: _light,
      themeMode: _isDark ? ThemeMode.dark : ThemeMode.light,
      debugShowCheckedModeBanner: false,
      title: 'Flutter Theme',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Theme Demo'),
          centerTitle: true,
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Row(
                children: [
                  Text('Happy', style: _style),
                ],
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 40),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('New', style: _style),
                  ],
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Text('Year', style: _style),
                ],
              ),
              Text('2021',
                  style: _style.copyWith(
                    color: Colors.deepOrange,
                    fontWeight: FontWeight.bold,
                  )),
              Padding(
                padding: const EdgeInsets.only(top: 80),
                child: CupertinoSwitch(
                  value: _isDark,
                  onChanged: (v) {
                    setState(() {
                      _isDark = !_isDark;
                    });
                  },
                ),
              ),
              Text('Dark'),
            ],
          ),
        ),
      ),
    );
  }
}

This is my first post on the Dev Community. If you have suggestion or any problem in my post comment down, I will try to resolve it as soon as possible.