Flutter Themes

Flutter Themes: Customizing Colors, Text Styles, and Icons

Flutter’s theming system allows developers to design visually consistent and engaging applications. Whether you’re creating a unique brand identity or just adding a personal touch to your app, Flutter’s theme customisation tools help you achieve your goals. In this blog, we’ll explore how to customise colors, text styles, and icons in Flutter using its robust theming system.

Table of Contents

1. What is a Theme in Flutter?
2. Customizing Colors
   • Defining Primary and Accent Colors
   • Customizing Background and Surface Colors
3. Customizing Text Styles
   • Using TextTheme
   • Modifying Font Sizes, Weights, and Families
4. Customizing Icons
   • Changing Icon Themes
   • Using Custom Icons
5. Implementing Dark Mode
6. Best Practices for Flutter Theming
7. Conclusion

1. What is a Theme in Flutter?

In Flutter, a theme controls the overall appearance of an app, including colors, typography, and icon styles. The ThemeData class holds the design configurations that define the theme of the app, helping developers ensure visual consistency.

Themes in Flutter are hierarchical:

• Global Theme: Defined at the root level using MaterialApp.
• Local Theme: Overrides the global theme at the widget level with Theme widget.

To apply a theme globally, you define the ThemeData within the MaterialApp widget:

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue,
    accentColor: Colors.orange,
  ),
  home: MyHomePage(),
);

Let’s now dive deeper into customizing the essential aspects of your Flutter theme: colors, text styles, and icons.

2. Customizing Colors

Flutter’s ThemeData allows you to customize the color palette for your app. You can specify primary colors, accent colors, background colors, and more.

Defining Primary and Accent Colors

The primary and accent colors are the most commonly used in Flutter themes. The primary color is used in the app bar, floating action buttons (FABs), and other major UI elements. The accent color highlights components like switches and active elements.

ThemeData(
  primaryColor: Colors.deepPurple,   // Primary color
  accentColor: Colors.amber,         // Accent color
);

Customizing Background and Surface Colors

In addition to primary and accent colors, you can define background colors, surface colors, and other complementary hues for a cohesive design.

ThemeData(
  backgroundColor: Colors.white,      // Background color of screens
  scaffoldBackgroundColor: Colors.grey[100], // Background color of the Scaffold
  cardColor: Colors.grey[200],        // Color of cards and surfaces
);

You can also use ColorScheme for more granular control of color application, like error colors and secondary variants:

ThemeData(
  colorScheme: ColorScheme.light(
    primary: Colors.teal,
    secondary: Colors.tealAccent,
    error: Colors.red,
  ),
);

3. Customizing Text Styles

Text is a crucial part of app design, and Flutter gives you the flexibility to adjust text styles to match your design requirements. The TextTheme class defines a variety of text styles used throughout the app.

Using TextTheme

Flutter’s ThemeData contains a textTheme property, which provides default styles for headings, body text, captions, and more. You can modify the TextTheme to fit your custom font size, color, or font family.

ThemeData(
  textTheme: TextTheme(
    headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
    bodyText1: TextStyle(fontSize: 14.0, fontFamily: 'Roboto'),
  ),
);

Modifying Font Sizes, Weights, and Families

Flutter lets you easily adjust the size, weight, and even the font family of your text.

ThemeData(
  textTheme: TextTheme(
    headline4: TextStyle(fontSize: 34.0, fontWeight: FontWeight.w400, fontFamily: 'OpenSans'),
    bodyText2: TextStyle(fontSize: 16.0, fontFamily: 'Georgia'),
  ),
);

You can apply a specific font family throughout the app by overriding fontFamily:

ThemeData(
  fontFamily: 'Montserrat',
);

4. Customizing Icons

Icons are essential to the user experience, and Flutter makes it simple to customize their appearance. The iconTheme property in ThemeData helps you set a consistent style for all icons in the app.

Changing Icon Themes

You can customize the size, color, and opacity of icons in the app with the IconThemeData class:

ThemeData(
  iconTheme: IconThemeData(
    color: Colors.pinkAccent,
    size: 24.0,
  ),
);

Using Custom Icons

If you want to use custom icons instead of Flutter’s built-in Material icons, you can add custom assets to your project.

1. Add your custom icons to the pubspec.yaml file:

flutter:
  assets:
    - assets/icons/custom_icon.png

2. Use the ImageIcon widget to display custom icons:

ImageIcon(
  AssetImage('assets/icons/custom_icon.png'),
  size: 24.0,
  color: Colors.black,
);

5. Implementing Dark Mode

Flutter supports dark mode out of the box. You can define separate themes for light and dark modes using the ThemeData.light() and ThemeData.dark() constructors.

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system, // Uses system theme setting
);

Customizing the dark theme works similarly to the light theme. You can define different colors, text styles, and icon themes to ensure a seamless transition between modes.

6. Best Practices for Flutter Theming

1. Consistency is Key: Use consistent spacing, padding, and color schemes throughout your app to create a cohesive experience.
2. Custom Themes for Different Screens: You can apply custom themes to individual screens using the Theme widget.
3. Dark Mode Support: Always ensure that your app is optimized for both light and dark themes.
4. Use ColorScheme: For better semantic meaning in your theme, prefer using ColorScheme instead of directly assigning colors.

7. Conclusion

Customizing Flutter themes gives you the flexibility to create visually unique apps while maintaining consistency. Whether you’re working with colors, text styles, or icons, Flutter’s theming system is versatile and easy to use. By following the guidelines and best practices outlined in this blog, you can enhance your Flutter app’s design and ensure a seamless experience for users.

Explore Other Flutter Topics…

1. Introduction to Flutter and Dart
2. Why choose Flutter
3. Installing Flutter On Your Windows Mac And Linux System
4. Your first Flutter app
5. Flutter project structure
6. Building blocks of Flutter
7. Stateful vs. Stateless Widgets Explained
8. Flutter layout system
9. Flutter text widget
10. Creating Buttons in Flutter: ElevatedButton, TextButton, and IconButton
11. Handling User Input with Flutter Forms
12. Container class in Flutter
13. Flutter Navigation
14. Flutter – Pass Data One Screen To Another Screen
15. Managing Device Orientation in Flutter
16. Stateful widget lifecycle in Flutter
17. Future of Flutter
18. Flutter Themes
19. Flutter Animations
20. Flutter AppBar Customization
21. ListView in Flutter
22. Flutter GridView
23. Flutter Expanded Widget
24. Flutter BottomNavigation Bar
25. Floating Action Button
26. Drawer Widgets in Flutter
27. Form Validation in Flutter
28. Flutter TextField
29. Adding AdMob ads to a Flutter app
30. Building Flutter Web & Desktop Applications
31. What is Async and Await in Flutter
32. HTTP requests in Flutter
33. Parsing JSON in Flutter
34. Tinder-Style Swipe Cards in Flutter
35. Flutter Tic Tac Toe Game Tutorial
36. Flutter Login UI Tutorial
37. Flutter Card Widget Tutorial
38. Flutter music player app tutorial
39. Flutter introduction screens
40. Shared Preferences in Flutter
41. SQLite Database in Flutter
42. Firebase Authentication in Flutter
43. Firebase Firestore in Flutter
44. Push Notifications in Flutter
45. Handling File Uploads in Flutter
46. Responsive Design in Flutter
47. Provider in Flutter
48. Riverpod in Flutter
49. Flutter BLoC Pattern Tutorial