Passing data between screens in Flutter - Mini App: Build & Ship

Build: Home and Detail Screens

Build two screens: Home screen with a button to navigate to Detail screen. Pass a message string from Home to Detail and display it there.

Target UI

Home Screen
+---------------------+
|                     |
|  [Go to Detail]     |
|                     |
+---------------------+

Detail Screen
+---------------------+
|                     |
|  Message:           |
|  "Hello from Home"  |
|                     |
+---------------------+

Home screen with a button labeled 'Go to Detail'

On button tap, navigate to Detail screen

Pass a string message 'Hello from Home' to Detail screen

Detail screen displays the passed message in a Text widget

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        // TODO: Add ElevatedButton to navigate to DetailScreen with data
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  final String message;

  const DetailScreen({super.key, required this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Detail Screen')),
      body: Center(
        // TODO: Display the passed message 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: 'Passing Data Demo',
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const DetailScreen(message: 'Hello from Home'),
              ),
            );
          },
          child: const Text('Go to Detail'),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  final String message;

  const DetailScreen({super.key, required this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Detail Screen')),
      body: Center(
        child: Text(message, style: const TextStyle(fontSize: 20)),
      ),
    );
  }
}

We created two screens: HomeScreen and DetailScreen. The HomeScreen has a button labeled 'Go to Detail'. When tapped, it uses Navigator.push to open DetailScreen. We pass the string 'Hello from Home' as a parameter to DetailScreen's constructor. The DetailScreen receives this string and shows it inside a Text widget centered on the screen. This way, data is passed simply and clearly between screens.

Final Result

Completed Screen

Home Screen
+---------------------+
|                     |
|  [Go to Detail]     |
|                     |
+---------------------+

Detail Screen
+---------------------+
|                     |
|  Hello from Home    |
|                     |
+---------------------+

User taps 'Go to Detail' button on Home Screen

App navigates to Detail Screen

Detail Screen shows the message 'Hello from Home'

Stretch Goal

Add a back button on Detail screen that returns to Home screen

💡 Hint

Use AppBar's automatically provided back button or Navigator.pop(context) to go back