An App Theme From a Seed

Part of the Layout That Fits section of Coddy's Flutter journey. Lesson 21 of 30.

Every button, switch and slider in your app takes its colors from one place: the app's theme. Change the theme and the whole app changes with it, without touching a single button.

You set it on MaterialApp. The quickest way to make one starts from a single seed color:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
  ),
  home: ...,
)

ColorScheme.fromSeed builds a whole set of matching colors from the seed: a strong primary for buttons and links, a soft primaryContainer for filled areas, a surface for the background, and the colors of the text that goes on each. They are tones of the seed, so the orange on a button is not exactly Colors.orange, but it is clearly orange and easy to read.

The purple you have seen so far is Flutter's default seed.

Challenge

Easy

Give the Garden Journal a green theme: set the MaterialApp's theme: to a ThemeData whose color scheme comes from the seed Colors.green. Both buttons turn green without being changed.

Try it yourself

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Garden Journal')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextButton(
                onPressed: () {},
                child: const Text('Cancel'),
              ),
              const SizedBox(width: 16),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Save'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}