Setting Up Themes in Flutter

Jul 16, 2024

Setting Up Themes in Flutter

Introduction

  • Lecture focus: Setting up reusable themes in Flutter projects
  • Goal: Create and reuse themes for any type of Flutter project
  • By end of lecture, you will be able to:
    • Create any type of theme for a Flutter project
    • Reuse themes across different projects

Objectives

  • Ensure reusability in all types of projects
  • Switch between light and dark modes seamlessly
  • Cover custom themes for different widgets

What We Will Achieve

  • Example: A text field in dark mode
    • Elements: Text field, Remember me checkbox, Elevated button, Outline button
    • Switch to light mode to see changes
    • Custom app bar remains consistent across modes
  • Series involves building a Flutter eCommerce app
    • Previous tutorials: Folder structures and professional expandable structures

Agenda

  1. What is a theme?
  2. Setting theme data
  3. Light and dark modes
  4. Creating custom themes for various widgets
    • Text theme, Elevated button, Outline button, Text field, Chip, Bottom sheet, etc.

Project Setup

  • Reference previous crash course videos for basic setup
  • Create a new class for the main app (STL shortcut)
    • Class Name: SimpleApp
    • Material app as the starting point

Define Theme Data

  • Theme data is required
  • Default theme is treated as light theme
  • Use themeMode to switch between ThemeMode.light, ThemeMode.dark, ThemeMode.system
  • Properties to customize:
    • Brightness, ColorScheme, TextTheme, etc.

Example Code

  • Create a class TAppTheme to hold theme data
  • Example of setting light and dark themes:
static final ThemeData lightTheme = ThemeData(
  useMaterial3: true,
  brightness: Brightness.light,
  primaryColor: Colors.blue,
  scaffoldBackgroundColor: Colors.white,
);

static final ThemeData darkTheme = ThemeData(
  useMaterial3: true,
  brightness: Brightness.dark,
  primaryColor: Colors.blue,
  scaffoldBackgroundColor: Colors.black,
);

Creating Custom Themes

Text Themes

  • Define different text styles
  • Example: headlineLarge, headlineMedium with TextStyle
  • Use of copyWith method
  • Creating static functions for themes in TTextTheme class

Elevate Button Themes

  • Use ElevatedButtonThemeData
  • Example: Define styles for light and dark modes
  • Define default TextStyle, Padding, Shape etc.

AppBar Themes

  • Example: Custom AppBarTheme for light and dark modes
  • Properties: elevation, backgroundColor, iconColor

Bottom Sheet Themes

  • Define styles for BottomSheetThemeData
  • Include properties like elevation, backgroundColor, and shape

Checkbox Themes

  • Create rounded rectangle border
  • Define checkColor and fillColor

Chip Themes

  • Used in product detail pages
  • Define styles for ChipThemeData
  • Properties: padding, checkmarkColor, selectedColor

Outline Button Themes

  • Use OutlineButtonThemeData
  • Define styles for light and dark modes
  • Properties: side, padding, shape

Utilization

  • Import and initialize themes in main.dart
  • Usage example:
   theme: TAppTheme.lightTheme,
   darkTheme: TAppTheme.darkTheme,
   themeMode: ThemeMode.system,
  • Reusable approach: Separate folders for different themes (e.g., button themes, text themes)

Conclusion

  • By organizing themes into reusable components, we ensure a clean and maintainable code base
  • Easy to migrate themes across different projects
  • Custom themes enhance the user interface significantly

Full transcript