Change Flutter app theme based on device settings
--
Nowadays, almost every app has an option to change its theme. Usually, these apps have three theme options: light, dark and system default. In this article, we will be focusing on the third option, i.e. system default.
YouTube tutorial:
In case you prefer tutorial videos over written tutorials, check out this YouTube video:
Coming soon…
Let’s begin!
Let’s start off by creating a new Flutter app, called auto_theme_app. I am using VS Code for this tutorial, but you can use any other IDE (like Android Studio) or even the terminal.
To create a new Flutter project in VS Code, press Ctrl + Shift + P and enter Flutter: New Project. Alternatively, you can click on View, then Command Pallette….
Ctrl + Shift + P and enter Flutter: New Project.We will name the app auto_theme_app as the app will automatically change its theme based on the device theme settings.
Once the Flutter project is created, open the main.dart file. Remove all the comments so that the code looks a bit cleaner. Alternatively, you can clear the entire file and paste the following code:
When we run this app, we can only see the light theme. To add a dark theme to this app, we will use a property of MaterialApp called darkTheme. Add the following code inside the MaterialApp():
