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.
In case you prefer tutorial videos over written tutorials, check out this YouTube video:
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
P and enter
Flutter: New Project. Alternatively, you can click on
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
darkTheme. Add the following code inside the