Integrate dark theme in Flutter

Nowadays, almost every application has a dark theme feature, for example, YouTube, WhatsApp, and Instagram. Some of them have a toggle button in their app to on/ off the dark theme and others check theme settings in the device and display the selected theme. So in this blog let’s check how to implement the dark theme in the flutter.

You may also check our Flutter app development services page.

Now, let’s check how to implement a dark theme and switch themes without using a toggle button.

We are going to build a simple flutter app and use the dark theme, the theme property of MaterialApp to implement the dark theme.

Step 1: Create a simple UI using this code or create your UI.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Demo',
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo"),
      ),
      body:Container(
        child: Center(
          child: Text("HEY!", style: TextStyle(
            fontSize: 25,
            fontWeight: FontWeight.bold
          ),),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Theme Demo',

debugShowCheckedModeBanner: false,

home: MyHomePage(),

);

}

class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Demo"),

body:Container(

child: Center(

child: Text("HEY!", style: TextStyle(

fontSize: 25,

fontWeight: FontWeight.bold

),),

);

}

Step 2: Now create a class and define the dark theme and light theme using ThemeData.

To change text color, use the color scheme property of ThemData.
- Dark theme add- colorScheme: ColorScheme.dark()
- Light theme add- colorScheme: ColorScheme.light()

To change the app bar use the appBar theme. In the app bar theme, you can add background color, text color, style, and icon color.
For changing the background color use scaffoldBackgroundColor property and use colors according to your theme.

class ThemeClass{

  static ThemeData lightTheme = ThemeData(
    scaffoldBackgroundColor: Colors.white,
    colorScheme: ColorScheme.light(),
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.blue,
    )
  );

  static ThemeData darkTheme = ThemeData(
    scaffoldBackgroundColor: Colors.black,
    colorScheme: ColorScheme.dark(),
      appBarTheme: AppBarTheme(
        backgroundColor: Colors.black,
      )
  );
}

class ThemeClass{

static ThemeData lightTheme = ThemeData(

scaffoldBackgroundColor: Colors.white,

colorScheme: ColorScheme.light(),

appBarTheme: AppBarTheme(

backgroundColor: Colors.blue,

)

);

static ThemeData darkTheme = ThemeData(

scaffoldBackgroundColor: Colors.black,

colorScheme: ColorScheme.dark(),

appBarTheme: AppBarTheme(

backgroundColor: Colors.black,

)

);

}

Step 3: Now use these themes in your MaterialApp and add themeMode.system in the themeMode property of MaterialApp widget to check the theme of the device.

return MaterialApp(
      title: 'Flutter Theme Demo',
      debugShowCheckedModeBanner: false,
      themeMode:ThemeMode.system,
      theme: ThemeClass.lightTheme,
      darkTheme: ThemeClass.darkTheme,
      home: MyHomePage(),
    );

return MaterialApp(

title: 'Flutter Theme Demo',

debugShowCheckedModeBanner: false,

themeMode:ThemeMode.system,

theme: ThemeClass.lightTheme,

darkTheme: ThemeClass.darkTheme,

home: MyHomePage(),

);

Step 4: While defining colors in your app use theme properties instead of static color.

appBar: AppBar(
        title: Text("Demo"),
        backgroundColor:Theme.of(context).appBarTheme.backgroundColor ,
      ),

appBar: AppBar(

title: Text("Demo"),

backgroundColor:Theme.of(context).appBarTheme.backgroundColor ,

Now run your app and change theme settings in your device and again open the app and here is your selected theme. You can also change your theme back to the light theme by doing the same.

Output:

Thanks for reading this article ❤

If I got something wrong, let me know in the comments. I would love to improve.

Reference Link:

https://www.geeksforgeeks.org/flutter-dark-theme/

Nausheen Siddiqui

20 Dec, 2023
Updated by - Nausheen Siddiqui
27 Apr, 2023
Updated by - Nausheen Siddiqui

. . .

3 comments

studytonight 3 years ago

Hi, there, thank you for sharing such a great piece of content with us. It is really an informative and amazing post, it also helps me a lot.
Java BufferedReader
Assert Exceptions in JUnit
Java Immutable
print the pattern G

Bilal Saeed 3 years ago

Theme.of(context).appBarTheme.backgroundColor

And if we don’t have context available, then what?
Like in the main function:
SystemUiOverlayStyle(
statusBarColor: Theme.of(context).appBarTheme.backgroundColor,
);
we don’t have context available here as parameter from main function

nausheen Siddiqui (Moderator) 3 years ago
Hello,
The main function doesn’t have context. For changing your status bar color use SystemUOverlayStyle in the app bar or, you can use an AnnotatedRegion<SystemUiOverlayStyle> which is a widget and only has an effect on the widget that you wrap.

Reply

Integrate dark theme in Flutter

Leave a Comment Cancel Reply

3 comments

Message Sent!