BuildContext in Flutter - Mini App: Build & Ship

Build: BuildContext Demo Screen

This screen demonstrates how to use BuildContext to show a SnackBar and navigate between screens.

Target UI

┌───────────────────────────────┐
│ BuildContext Demo             │
├───────────────────────────────┤
│                               │
│ [Show SnackBar]               │
│                               │
│ [Go to Next Screen]           │
│                               │
└───────────────────────────────┘

Add a button labeled 'Show SnackBar' that shows a SnackBar with a message using BuildContext.

Add a button labeled 'Go to Next Screen' that navigates to a new screen using BuildContext.

The next screen should have a simple text 'Next Screen' and a back button.

Starter Code

Flutter

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: 'BuildContext Demo',
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('BuildContext Demo')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // TODO: Add 'Show SnackBar' button here
            // TODO: Add 'Go to Next Screen' button here
          ],
        ),
      ),
    );
  }
}

// TODO: Create NextScreen widget here

Task 1

Task 2

Task 3

Solution

Flutter

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: 'BuildContext Demo',
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('BuildContext Demo')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Hello from SnackBar!')),
                );
              },
              child: const Text('Show SnackBar'),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => const NextScreen()),
                );
              },
              child: const Text('Go to Next Screen'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Next Screen')),
      body: const Center(
        child: Text('Next Screen'),
      ),
    );
  }
}

This example shows how to use BuildContext to interact with the widget tree.

We use ScaffoldMessenger.of(context) to show a SnackBar on the current screen.

We use Navigator.of(context).push() to navigate to a new screen.

The NextScreen widget is a simple page with a back button automatically provided by the AppBar.

This teaches how BuildContext helps find the right place in the widget tree to perform actions like showing messages or navigation.

Final Result

Completed Screen

┌───────────────────────────────┐
│ BuildContext Demo             │
├───────────────────────────────┤
│                               │
│ [Show SnackBar]               │
│                               │
│ [Go to Next Screen]           │
│                               │
└───────────────────────────────┘

-- After tapping 'Show SnackBar' --
┌───────────────────────────────┐
│ BuildContext Demo             │
├───────────────────────────────┤
│                               │
│ [Show SnackBar]               │
│                               │
│ [Go to Next Screen]           │
│                               │
│ ┌─────────────────────────┐ │
│ │ Hello from SnackBar!     │ │
│ └─────────────────────────┘ │
└───────────────────────────────┘

-- After tapping 'Go to Next Screen' --
┌───────────────────────────────┐
│ Next Screen                  ◀│
├───────────────────────────────┤
│                               │
│          Next Screen           │
│                               │
└───────────────────────────────┘

Tap 'Show SnackBar' button: A SnackBar with message 'Hello from SnackBar!' appears at the bottom.

Tap 'Go to Next Screen' button: The app navigates to the Next Screen with a back arrow in the AppBar.

Tap back arrow on Next Screen: Returns to the BuildContext Demo screen.

Stretch Goal

Add a FloatingActionButton that shows a dialog with a TextField and a button to display the entered text in a SnackBar using BuildContext.

💡 Hint

Use showDialog with context, TextEditingController to get input, and ScaffoldMessenger.of(context) to show SnackBar.