Flutter Theming: Light and Dark Theme with Custom Color
Flutter framework is well known for its efficient and easy-to-use theming system that allows developers to create beautiful, consistent user interfaces with minimal effort. In this blog post, we will focus on how to create a light and dark theme with custom colors in Flutter.
Theming is a critical aspect of app design, as it provides users with a consistent look and feel across the entire application. With Flutter app development services, theming is a breeze, and developers can create custom mobile app themes that match their branding guidelines or suit their users’ preferences.
In this tutorial, we will demonstrate how to create a light and dark theme with custom colors and how to switch between them dynamically. We will also explore how to define custom colors and how to use them in your themes. So, let’s get started!
But before we start the adventure, let’s read about from zero to become a hero in creating dedicated Flutter theming in your app.
What is Flutter Theming?
Flutter theming refers to the process of customizing the visual appearance of a Flutter application. With theming, you can define a set of colors, typography, and other visual attributes that are consistent throughout your app development solutions. This makes it easier to maintain a consistent look and feel across your application and allows you to easily change the appearance of your app by modifying the theme.
In Flutter, you can define a theme using the ThemeData class, which allows you to specify properties such as the background color, primary and accent colors, text styles, and more. Once you have defined a theme, you can apply it to your entire app or to specific widgets using the Theme widget. But hey! Do you know what’s better? Making flutter ideal for the MVP development process.
Flutter also provides a number of built-in themes that you can use as a starting point for your own custom themes. These include the MaterialApp and CupertinoApp widgets, which provide pre-defined themes that mimic the look and feel of Material Design and iOS app development respectively.
Step-By-Step Guide on Creating Light and Dark Theme With Custom Colors in Flutter
Let’s dive into the details of creating a light and dark theme with custom colors in Flutter.
Step-1: Defining Custom Colors
As mentioned in the introduction, we first need to define our custom colors before creating our themes. The Color class in Flutter app development provides several ways to define colors, such as using RGB or HEX values. In this example, we will create a separate file called colors.dart and define our custom colors as constants.
Here is an example of how to define custom colors in colors.dart:
|
1 2 3 4 5 6 7 |
import 'package:flutter/material.dart'; const Color primaryColor = Color(0xFF3D4EB8); const Color secondaryColor = Color(0xFFEEF2FE); const Color accentColor = Color(0xFFFFC107); |
In this example, we have defined three custom colors:
- primaryColor: This color is used as the primary color for our application, such as the color of the app bar and the primary button.
- secondaryColor: This color is used as the background color for our application, such as the color of the scaffold and the body.
- accentColor: This color is used as the accent color for our application, such as the color of the floating action button and the selected item in a list.
Note that you can define as many custom colors as you need, depending on your design requirements.
Step-2: Creating Themes
Once we have defined our custom colors, we can create our light and dark themes using the ThemeData class. The ThemeData class provides various properties for different theme elements, such as primaryColor, accentColor, scaffoldBackgroundColor, textTheme, and many more. You can set these properties to your custom colors to create a consistent look and feel across your mobile app development facet.
Here is an example of how to create a light theme:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
final ThemeData lightTheme = ThemeData( primaryColor: primaryColor, accentColor: accentColor, scaffoldBackgroundColor: Colors.white, backgroundColor: secondaryColor, textTheme: TextTheme( headline6: TextStyle( color: Colors.black, fontWeight: FontWeight.bold, ), bodyText2: TextStyle( color: Colors.black87, ), ), ); |
In this example, we have set the primaryColor and accentColor properties to our custom colors, and we have also set the background colors and text colors for different parts of our application. Specifically:
- primaryColor: This is set to our custom primaryColor.
- accentColor: This is set to our custom accentColor.
- scaffoldBackgroundColor: This is set to Colors.white, which means that the background color of our scaffold (i.e., the background color of our app) will be white.
- backgroundColor: This is set to our custom secondaryColor, which means that the background color of the body of our app will be secondaryColor.
- textTheme: This is used to define the text styles for different types of text in our app. In this example, we have set the text color for headline6 to black and the text color for bodyText2 to black87. Note that you can customize the text styles further by setting other properties of the TextStyle class.
Similarly, here is an example of how to create a dark theme:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
final ThemeData darkTheme = ThemeData( primaryColor: primaryColor, accentColor: accentColor, scaffoldBackgroundColor: Colors.black, backgroundColor: Colors.grey[900], textTheme: TextTheme( headline6: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, ), bodyText2: TextStyle( color: Colors.white70, ), ), ); |
In this example, we have set the same properties as our light theme, but with different color values that are more suitable for a dark theme.
Step-3: Switching Themes
Now that we have created our light and dark themes, we need to provide a way for users to switch between them. By hiring a Flutter app development company, we can easily switch between themes by wrapping our MaterialApp widget in a Theme widget and setting the data property to our selected theme.
Although switching themes seems like a one-person job, it’s not apparently! Head on and read out the top Flutter development companies and developers to choose one perfect and suitable for your company.
Here is an example of how to switch between light and dark themes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { bool _isDarkModeEnabled = false; void _toggleDarkMode() { setState(() { _isDarkModeEnabled = !_isDarkModeEnabled; }); } @override Widget build(BuildContext context) { final theme = _isDarkModeEnabled ? darkTheme : lightTheme; return MaterialApp( title: 'My App', theme: theme, home: Scaffold( appBar: AppBar( title: Text('My App'), ), body: Center( child: Text( 'Hello, world!', style: Theme.of(context).textTheme.headline6, ), ), floatingActionButton: FloatingActionButton( onPressed: _toggleDarkMode, child: Icon(Icons.lightbulb), ), ), ); } } |
In this example, we have created a MyApp widget that contains a boolean _isDarkModeEnabled that toggles between light and dark modes. We then use the ternary operator to set the theme property of our MaterialApp widget to either lightTheme or darkTheme, depending on the value of _isDarkModeEnabled.
We have also added a FloatingActionButton that toggles the value of _isDarkModeEnabled when pressed. When the value of _isDarkModeEnabled changes, the build method is called, which rebuilds our app with the new theme.
How DianApps Can Assist In Designing Flutter Light & Dark Theme With Custom Colors?
With years of experience in delivering Flutter app development services, DianApps’ team can seamlessly create customized Flutter light & dark theme applications by utilizing their expertise in technology and mobile app development.
Here’s how they started working on the project:
- Firstly, the team can work with you to identify your custom color palette and understand your design requirements. They can then define the custom colors and create the light and dark themes that fit your design specifications.
- Additionally, the team can provide guidance on how to implement theme switching in your app, ensuring a smooth transition between the two themes. They can also assist in creating custom widgets that are consistent with your selected themes.
- DianApps team has extensive experience in creating custom themes in Flutter, and they can help you create a visually appealing and cohesive user interface for your app development. Their focus on delivering high-quality, user-friendly solutions ensures that your app looks great and functions flawlessly across all devices and platforms.
Wrapping Up
Theming is an important aspect of creating a visually appealing and consistent user interface in Flutter. By defining custom colors and creating light and dark themes, you can ensure that your app has a cohesive design that is both attractive and functional. Flutter’s built-in Theme widget makes it easy to switch between themes and customize properties such as text styles, background colors, and more.
Creating custom themes in Flutter may require some expertise in Flutter development. If you need assistance in creating custom themes, you can rely on our expertise in Flutter development services. Being a top Flutter app development company in the USA team of experienced developers can help you create custom light and dark themes with custom colors seamlessly, ensuring that your app looks and functions flawlessly across all devices and platforms.
With this step-by-step guide, you can create a stunning user interface that enhances your app’s overall user experience.
0
