skills/flutter/references/features-material-3.md

name	description
features-material-3	Material 3 design system - Material 3 components, color schemes, and design tokens

Material 3

Material 3 (Material You) is the latest Material Design system with dynamic color and updated components.

Enable Material 3

Enable Material 3 in your app.

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
  ),
  home: const HomeScreen(),
)

ColorScheme

Material 3 uses dynamic color schemes.

// Generate from seed color
ColorScheme.fromSeed(
  seedColor: Colors.blue,
  brightness: Brightness.light,
)

// Custom color scheme
ColorScheme(
  brightness: Brightness.light,
  primary: Colors.blue,
  onPrimary: Colors.white,
  secondary: Colors.purple,
  onSecondary: Colors.white,
  error: Colors.red,
  onError: Colors.white,
  surface: Colors.white,
  onSurface: Colors.black,
  surfaceVariant: Colors.grey[100]!,
  onSurfaceVariant: Colors.grey[800]!,
)

Material 3 Components

FilledButton

Filled button style (Material 3).

FilledButton(
  onPressed: () {},
  child: const Text('Filled Button'),
)

FilledButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.add),
  label: const Text('Add'),
)

FilledTonalButton

Tonal filled button.

FilledTonalButton(
  onPressed: () {},
  child: const Text('Tonal Button'),
)

SegmentedButton

Segmented button group.

SegmentedButton<String>(
  segments: const [
    ButtonSegment(value: 'list', label: Text('List')),
    ButtonSegment(value: 'grid', label: Text('Grid')),
  ],
  selected: {'list'},
  onSelectionChanged: (Set<String> newSelection) {
    setState(() {
      selected = newSelection;
    });
  },
)

NavigationBar

Bottom navigation bar (Material 3).

NavigationBar(
  selectedIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  destinations: const [
    NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
    NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
    NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
  ],
)

NavigationRail

Side navigation rail.

NavigationRail(
  selectedIndex: _currentIndex,
  onDestinationSelected: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  labelType: NavigationRailLabelType.all,
  destinations: const [
    NavigationRailDestination(
      icon: Icon(Icons.home),
      label: Text('Home'),
    ),
    NavigationRailDestination(
      icon: Icon(Icons.search),
      label: Text('Search'),
    ),
  ],
)

SearchBar

Search bar component.

SearchBar(
  hintText: 'Search...',
  onChanged: (value) {
    // Handle search
  },
  leading: const Icon(Icons.search),
  trailing: [
    IconButton(
      icon: const Icon(Icons.clear),
      onPressed: () {},
    ),
  ],
)

Material 3 Theming

ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.blue,
    brightness: Brightness.light,
  ),
  // Material 3 specific themes
  navigationBarTheme: NavigationBarThemeData(...),
  navigationRailTheme: NavigationRailThemeData(...),
  searchBarTheme: SearchBarThemeData(...),
)

Key Points

• Set useMaterial3: true to enable Material 3
• Use ColorScheme.fromSeed() for dynamic colors
• Material 3 introduces new components like FilledButton, NavigationBar, SearchBar
• Material 3 uses updated design tokens and spacing
• Components adapt to color scheme automatically
• Material 3 provides better accessibility and customization