Why theming creates consistent UI in Flutter - Build It to Prove It

Build: Themed Buttons Screen

This screen shows how using a theme creates a consistent look for buttons across the app.

Target UI

-------------------------
| Themed Buttons Screen  |
|-----------------------|
| [Primary Button]      |
| [Secondary Button]    |
| [Disabled Button]     |
-------------------------

Use ThemeData to define primary and secondary colors

Apply the theme to the MaterialApp

Create three buttons: primary, secondary, and disabled

All buttons should use the theme colors automatically

Disabled button should appear faded using theme's disabled color

Starter Code

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Theming Demo',
      // TODO: Add theme here
      home: const ThemedButtonsScreen(),
    );
  }
}

class ThemedButtonsScreen extends StatelessWidget {
  const ThemedButtonsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Themed Buttons Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // TODO: Add primary button
            // TODO: Add secondary button
            // TODO: Add disabled button
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Theming Demo',
      theme: ThemeData(
        primaryColor: Colors.blue,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue).copyWith(secondary: Colors.orange),
        disabledColor: Colors.grey.shade400,
      ),
      home: const ThemedButtonsScreen(),
    );
  }
}

class ThemedButtonsScreen extends StatelessWidget {
  const ThemedButtonsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Themed Buttons Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () {},
              child: const Text('Primary Button'),
            ),
            const SizedBox(height: 16),
            OutlinedButton(
              onPressed: () {},
              style: OutlinedButton.styleFrom(
                foregroundColor: theme.colorScheme.secondary,
              ),
              child: const Text('Secondary Button'),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: null, // disabled
              style: ElevatedButton.styleFrom(
                backgroundColor: theme.disabledColor,
                foregroundColor: Colors.white,
              ),
              child: const Text('Disabled Button'),
            ),
          ],
        ),
      ),
    );
  }
}

We define a ThemeData with primary and secondary colors. The MaterialApp uses this theme, so all widgets inside can access it. The ElevatedButton uses the primary color automatically. The OutlinedButton uses the secondary color from the theme. The disabled button uses the theme's disabled color to appear faded. This way, all buttons share consistent colors and styles, making the UI look unified and professional.

Final Result

Completed Screen

-------------------------
| Themed Buttons Screen  |
|-----------------------|
| [Primary Button]      |
| [Secondary Button]    |
| [Disabled Button]     |
-------------------------

Tapping Primary Button triggers onPressed action (prints or no-op here)

Tapping Secondary Button triggers onPressed action

Disabled Button is not tappable and appears faded

Stretch Goal

Add a toggle to switch between light and dark theme to see consistent theming in both modes.

💡 Hint

Use ThemeMode and define both lightTheme and darkTheme in MaterialApp. Add a switch in the app bar to toggle ThemeMode.