iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Material App

By · Reviewed & last updated · Part of Flutter Tutorial

Material is Google’s design system for Android (and Flutter). MaterialApp sets up routing, theming, and localisation. Every Material widget reads colours and typography from Theme.of(context).

MaterialApp, Theme, Scaffold

EXAMPLE
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: 'My App',
            // Material 3 + a seeded colour scheme
            theme: ThemeData(
                useMaterial3:    true,
                colorSchemeSeed: const Color(0xFF04AA6D),
                brightness:      Brightness.light,
            ),
            darkTheme: ThemeData(
                useMaterial3:    true,
                colorSchemeSeed: const Color(0xFF04AA6D),
                brightness:      Brightness.dark,
            ),
            themeMode: ThemeMode.system,

            home: const HomePage(),
        );
    }
}

class HomePage extends StatelessWidget {
    const HomePage({super.key});
    @override
    Widget build(BuildContext context) {
        final scheme = Theme.of(context).colorScheme;
        return Scaffold(
            appBar: AppBar(
                title: const Text('Home'),
                backgroundColor: scheme.primaryContainer,
            ),
            body: Center(
                child: Text('Hi', style: Theme.of(context).textTheme.headlineMedium),
            ),
            floatingActionButton: FloatingActionButton.extended(
                onPressed: () {},
                icon:  const Icon(Icons.add),
                label: const Text('New'),
            ),
            bottomNavigationBar: NavigationBar(
                destinations: const [
                    NavigationDestination(icon: Icon(Icons.home),   label: 'Home'),
                    NavigationDestination(icon: Icon(Icons.person), label: 'Me'),
                ],
                selectedIndex: 0,
                onDestinationSelected: (_) {},
            ),
        );
    }
}

Why it matters

colorSchemeSeed + Material 3 is the easiest way to ship a polished, accessible app. One colour, full palette with WCAG contrast for free.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
MaterialApp(
    title: 'My App',
    theme: ThemeData(colorSchemeSeed: Colors.green, useMaterial3: true),
    home: Scaffold(
        appBar: AppBar(title: const Text('Home')),
        body: const Center(child: Text('Hi')),
    ),
);
Try it Yourself »

Discussion

Loading…