ThemeData configuration in Flutter - Mini App: Build & Ship

Build: Themed Home Screen

A simple home screen that uses ThemeData to style the app's colors and text styles.

Target UI

-------------------------
| Themed Home Screen     |
|-----------------------|
|                       |
|   Welcome to the app!  |
|                       |
|   Press the button     |
|                       |
|   [Click Me]           |
|                       |
-------------------------

Use ThemeData to set primary color to blue and accent color to orange.

Set the default font family to 'Roboto'.

Style the AppBar with the primary color.

Style the button with the accent color.

Use the theme's text styles for the welcome text.

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: 'ThemeData Demo',
      // TODO: Add ThemeData configuration here
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Themed Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // TODO: Add welcome text styled with theme
            // TODO: Add button styled with theme
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

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: 'ThemeData Demo',
      theme: ThemeData(
        primaryColor: Colors.blue,
        colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.orange),
        fontFamily: 'Roboto',
      ),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Themed Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'Welcome to the app!',
              style: theme.textTheme.headline6,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: theme.colorScheme.secondary,
              ),
              onPressed: () {},
              child: const Text('Click Me'),
            ),
          ],
        ),
      ),
    );
  }
}

We added a ThemeData to the MaterialApp to set the primary color to blue and the secondary (accent) color to orange using colorScheme. We also set the default font family to 'Roboto'.

In the HomeScreen, the AppBar automatically uses the primary color from the theme. The welcome text uses the theme's headline6 text style for consistent styling. The button uses ElevatedButton.styleFrom to apply the accent color from the theme's color scheme.

This setup ensures consistent colors and fonts across the app, making it easy to maintain and update the look.

Final Result

Completed Screen

-------------------------
| Themed Home Screen     |
|-----------------------|
|                       |
|   Welcome to the app!  |
|                       |
|   Press the button     |
|                       |
|   [Click Me]           |
|                       |
-------------------------

Tapping the 'Click Me' button triggers an empty onPressed callback (no action).

AppBar is styled with blue background.

Button background is orange.

Text uses Roboto font and theme's headline6 style.

Stretch Goal

Add dark mode support that switches colors automatically based on system theme.

💡 Hint

Use ThemeData.dark() and ThemeData.light() with MaterialApp's themeMode property.