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

name	description
features-material-components	Material Design components - AppBar, Scaffold, Drawer, BottomNavigationBar, and other Material widgets

Material Components

Flutter provides a comprehensive set of Material Design components.

Scaffold

Basic Material Design visual structure.

Scaffold(
  appBar: AppBar(
    title: const Text('Title'),
  ),
  body: const Center(
    child: Text('Body'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
  drawer: Drawer(...),
  bottomNavigationBar: BottomNavigationBar(...),
)

AppBar

Top app bar.

AppBar(
  title: const Text('Title'),
  leading: IconButton(
    icon: const Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: [
    IconButton(
      icon: const Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: const Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
  backgroundColor: Colors.blue,
  foregroundColor: Colors.white,
  elevation: 4,
  flexibleSpace: Container(...), // Custom background
)

Drawer

Navigation drawer.

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(color: Colors.blue),
        child: Text('Header'),
      ),
      ListTile(
        leading: const Icon(Icons.home),
        title: const Text('Home'),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      ListTile(
        leading: const Icon(Icons.settings),
        title: const Text('Settings'),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    ],
  ),
)

BottomNavigationBar

Bottom navigation bar.

int _currentIndex = 0;

BottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
    ),
  ],
  type: BottomNavigationBarType.fixed, // fixed, shifting
)

Card

Material Design card.

Card(
  elevation: 4,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      children: [
        const Text('Title'),
        const Text('Content'),
      ],
    ),
  ),
)

Dialog

Modal dialog.

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: const Text('Title'),
    content: const Text('Content'),
    actions: [
      TextButton(
        onPressed: () => Navigator.pop(context),
        child: const Text('Cancel'),
      ),
      ElevatedButton(
        onPressed: () => Navigator.pop(context),
        child: const Text('OK'),
      ),
    ],
  ),
)

SnackBar

Temporary message at bottom of screen.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: const Text('Message'),
    action: SnackBarAction(
      label: 'Action',
      onPressed: () {},
    ),
    duration: const Duration(seconds: 3),
    behavior: SnackBarBehavior.floating,
  ),
)

BottomSheet

Bottom sheet modal.

showModalBottomSheet(
  context: context,
  builder: (context) => Container(
    padding: const EdgeInsets.all(16),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ListTile(
          leading: const Icon(Icons.share),
          title: const Text('Share'),
          onTap: () {},
        ),
        ListTile(
          leading: const Icon(Icons.delete),
          title: const Text('Delete'),
          onTap: () {},
        ),
      ],
    ),
  ),
)

Key Points

• Use Scaffold as the main structure for Material apps
• AppBar provides top navigation and actions
• Drawer provides side navigation
• BottomNavigationBar provides bottom navigation
• Use Card for elevated content containers
• Use showDialog for modal dialogs
• Use SnackBar for temporary messages
• Use showModalBottomSheet for bottom sheets