DEV Community

Cover image for Simple Way to Implement Dark Theme in Your Flutter App
Pradeep Tintali
Pradeep Tintali

Posted on

Simple Way to Implement Dark Theme in Your Flutter App

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'),
            ],
          ),
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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,
  );
Enter fullscreen mode Exit fullscreen mode

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,
Enter fullscreen mode Exit fullscreen mode

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'),
            ],
          ),
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
brunoalfred profile image
bruno_alfred

Its so coool, keep it Up.