Customizing UI with Themes in Flutter

 Customizing the UI with themes in Flutter allows you to define consistent styles (like colors, fonts, shapes, etc.) across your app. This helps maintain a uniform look and feel and makes it easier to make global changes to your app’s appearance.

Here’s a quick breakdown of how to use themes in Flutter:

---

🌗 1. Using ThemeData for Light & Dark Themes

dart
MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
    textTheme: TextTheme(
      bodyLarge: TextStyle(fontSize: 18, color: Colors.black),
    ),
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    primarySwatch: Colors.deepPurple,
  ),
  themeMode: ThemeMode.system, // Can be .light, .dark, or .system
  home: MyHomePage(),
);

• theme: The light theme.

• darkTheme: The dark theme.

• themeMode: Defines which theme to use (light/dark/system).

---

🎨 2. Customizing Colors, Typography, Buttons, etc.

dart
ThemeData(
  primaryColor: Colors.teal,
  scaffoldBackgroundColor: Colors.grey[100],
  fontFamily: 'Roboto',
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.teal,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
    ),
  ),
);

You can customize:

• appBarTheme

• inputDecorationTheme (for TextField)

• cardTheme

• iconTheme

• and many more...

---

🌈 3. Using Theme.of(context)

To access theme values in widgets:

dart
Text(
  'Hello Flutter!',
  style: Theme.of(context).textTheme.bodyLarge,
);

---

🧩 4. Custom Themes with Extensions

If you need to define your own custom theme values:

dart
@immutable
class CustomTheme extends ThemeExtension<CustomTheme> {
  final Color customColor;

  const CustomTheme({required this.customColor});

  @override
  CustomTheme copyWith({Color? customColor}) {
    return CustomTheme(customColor: customColor ?? this.customColor);
  }

  @override
  CustomTheme lerp(ThemeExtension<CustomTheme>? other, double t) {
    if (other is! CustomTheme) return this;
    return CustomTheme(
      customColor: Color.lerp(customColor, other.customColor, t)!,
    );
  }
}

Use it like:

dart
ThemeData(
  extensions: <ThemeExtension<dynamic>>[
    CustomTheme(customColor: Colors.orange),
  ],
);

Then retrieve with:

dart
final customColor = Theme.of(context).extension<CustomTheme>()?.customColor;

---

⚡ Bonus Tips

• Use ThemeMode.system to respect the user's OS theme preference.

• For animations or transitions between themes, use AnimatedTheme.

• You can hot-reload theme changes for faster dev feedback.

READ MORE

Flutter Course In Hyderabad

Flutter’s Hot Reload: How It Works

Visit Our QUALITY THOUGHT Training Institute

GET DIRECTIONS