How to Pass Data Between Screens in Flutter: Simple Guide

In Flutter, you pass data between screens by sending arguments through the Navigator.push method and receiving them in the new screen's constructor or route settings. Use Navigator.push with a MaterialPageRoute and pass data as constructor parameters or via settings.arguments.

Syntax

To pass data between screens, you use Navigator.push with a route that accepts arguments. The receiving screen gets the data via its constructor or from RouteSettings.arguments.

• Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen(data: yourData))): Pass data directly via constructor.
• Navigator.pushNamed(context, '/routeName', arguments: yourData): Pass data via named routes and retrieve with ModalRoute.of(context)?.settings.arguments.

dart

Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen(data: yourData)));

Example

This example shows passing a string message from the first screen to the second screen using constructor parameters.

dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondScreen(message: 'Hello from First Screen!'),
              ),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  final String message;
  SecondScreen({required this.message});

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

Output

First screen with a button labeled 'Go to Second Screen'. When tapped, navigates to second screen showing text: 'Hello from First Screen!'

Common Pitfalls

Common mistakes when passing data between screens include:

• Not passing required data in the constructor, causing null errors.
• Forgetting to mark constructor parameters as required when needed.
• Using Navigator.pushNamed without properly setting up routes or retrieving arguments.
• Trying to access ModalRoute.of(context) too early in the widget lifecycle.

dart

/* Wrong: Missing required parameter */
class SecondScreen extends StatelessWidget {
  final String message;
  SecondScreen(); // No parameter passed

  @override
  Widget build(BuildContext context) {
    return Text(message); // message is null, causes error
  }
}

/* Right: Pass parameter and mark as required */
class SecondScreen extends StatelessWidget {
  final String message;
  SecondScreen({required this.message});

  @override
  Widget build(BuildContext context) {
    return Text(message);
  }
}

Quick Reference

Summary tips for passing data between screens in Flutter:

• Use Navigator.push with constructor arguments for simple data passing.
• Use Navigator.pushNamed with arguments for named routes.
• Retrieve arguments in the new screen via constructor or ModalRoute.of(context)?.settings.arguments.
• Always mark required parameters with required keyword.
• Test navigation and data passing to avoid null or type errors.

Key Takeaways

Pass data by sending it as arguments in Navigator.push or Navigator.pushNamed.

Receive data in the new screen via constructor parameters or route settings.

Always mark required parameters with the required keyword to avoid null errors.

Use named routes with arguments for cleaner navigation in larger apps.

Test navigation flows to catch common mistakes early.