Start a Project

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.

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

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.

Step 4: 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.

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/

Exit mobile version