Week 3: Material Design, Theming & Responsive Layouts

1. Material 3 Components

Scaffold is the standard page skeleton in Flutter — it provides the structure (app bar, body, floating action button, drawer) that almost every screen needs, and handles a surprising amount of platform-correct behavior for free.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Products')),
      body: ListView(
        children: [
          Card(
            child: ListTile(
              leading: const Icon(Icons.shopping_bag),
              title: const Text('Wireless Mouse'),
              subtitle: const Text('₹1,299'),
              trailing: const Icon(Icons.chevron_right),
              onTap: () {},
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

ListTile in particular is worth knowing well — it's the standard three-slot row (leading icon, title/subtitle, trailing widget) that shows up in settings screens, contact lists, and menus across almost every real Flutter app.

2. Light/Dark Theming with ColorScheme.fromSeed

Rather than picking a dozen colors by hand, Material 3's ColorScheme.fromSeed generates an entire, accessible, harmonious color scheme — primary, secondary, surface, error, and their "on" (text/icon) pairs — from a single brand color.

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF6750A4)),
    useMaterial3: true,
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: const Color(0xFF6750A4),
      brightness: Brightness.dark,
    ),
    useMaterial3: true,
  ),
  themeMode: ThemeMode.system, // follows the device's setting automatically
  home: const ProductListScreen(),
)

Widgets that read colors from Theme.of(context).colorScheme (which every Material widget does by default) automatically pick up whichever theme is active — there's no per-widget dark-mode branching to write.

3. MediaQuery, LayoutBuilder & Adaptive Layouts

MediaQuery reports facts about the whole screen (size, padding, text scale); LayoutBuilder reports the constraints of just the widget's own parent — the right tool depends on whether "adapt to" means the device or a specific part of the layout.

final screenWidth = MediaQuery.of(context).size.width;
final isTablet = screenWidth >= 600;

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth >= 600) {
      return const GridView2Column();
    }
    return const ListViewSingleColumn();
  },
)

LayoutBuilder is usually the better choice inside a nested layout — a widget that's only ever shown in a 300px-wide sidebar should adapt to that 300px, not to the phone's full 400px screen width that MediaQuery would report.

4. Hands-on Exercise

5. Knowledge Check

Four quick questions. Expand each to check your answer.