Flutter dark theme.
Add dark theme feature to your flutter application.
Hey Developers, today I discuss about how to add dark them option to your flutter application. because dark mode feature is very important to the mobile applications because of that its help to build a user friendly environment in our application.
Now I showing this feature setup process. Firstly you need to create a flutter project with your friendly ide.
And next you need to open your “pubspec.yaml” file and add this dependencies
like image. you can get the latest dio dependencies version in the pub.dev website using this link
dio: ^4.0.0
Dark theme action is next step.
Open your main screen page in your project (NOT A MAIN.DART) MAIN main screen page is the home page in your mobile app.
Open it in your ide and adding the library like my project.
import ‘package:dio/dio.dart’;
After this step you need to the add this logic command in your class file.
bool ready = false;
bool isDark = true;
Next step is the final step in the feature. This is the button action programing part you can place you dark mode option selected location in your main page.
In my application I add my dark mode button on my app bar.
And next write this command in your app bar like this image. code is given after the image.
actions: [
IconButton(
icon: Icon(isDark ? Icons.light_mode : Icons.dark_mode),
onPressed: () {
Get.changeTheme(isDark ? ThemeData.light() : ThemeData.dark());
setState(() {
isDark = !isDark;
});
}) ],
Finally Hot-reload your flutter project and view your out put.
My application output is bellow.
If you have any doute comment your problem in the comment section. Thankyou.
My other stories:
