Dark theme in the flutter


Nowadays, almost every application has a dark theme feature, for example, Youtube, WhatsApp, 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 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 for implementing the dark theme.

Step1: Create a simple UI using this code or create your own UI.

Step2: Now create a class and define dark theme and light theme using ThemeData.

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

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

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.


Thanks for reading this article ❤

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

Reference Link:


. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


  • studytonight
    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

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

    • nausheen Siddiqui (Moderator)
      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.
  • css.php

    We've bought a Shopware Extension which is a hybrid App, which we can now offer in the Google Play Store and the IOS App Store. I'am still impressed how fast and how sharp the support team leads us through every process of the App-Store clarification. Very fast and useful response.

    Markus Walter

    Markus Walter

    Founder, Das Apartment Living

    Talk to Sales


    Live Chat
    Start a Project

      Message Sent!

      If you have more details or questions, you can reply to the received confirmation email.

      Back to Home