Learn Passing Data Between Screens | Navigation Fundamentals

Definition

Data passing means sending information from one screen to another. This allows you to share user input, selections, or other values between different parts of your app.

When you navigate between screens in Flutter, you often need to send data along with the navigation action. The Navigator can carry arguments to a new screen, letting you customize what appears there or how it behaves. You typically pass data as an argument to the route when using Navigator.push or Navigator.pushNamed.

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
            
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Passing Data Demo',
      home: FirstScreen(),
      routes: {
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

class FirstScreen extends StatelessWidget {
  final String message = "Hello from the First Screen!";

  @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.pushNamed(
              context,
              '/second',
              arguments: message,
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // The data will be extracted here in a later example
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Text('Awaiting data...'),
      ),
    );
  }
}

To use the arguments that were passed, you need to extract them in the receiving screen. This is typically done inside the build method, using ModalRoute.of(context)?.settings.arguments. This lets you access the data and use it to update the UI.

main.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
            
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Extract Arguments Demo',
      home: FirstScreen(),
      routes: {
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

class FirstScreen extends StatelessWidget {
  final String message = "Data sent from First Screen!";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Send Data'),
          onPressed: () {
            Navigator.pushNamed(
              context,
              '/second',
              arguments: message,
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)?.settings.arguments as String?;

    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Text(args ?? 'No data received.'),
      ),
    );
  }
}

Note

Type safety matters when passing data. Always cast arguments to the expected type and handle possible null values to prevent runtime errors.

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 3

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you show me an example of passing data between screens in Flutter?

How do I handle null or missing arguments when extracting data?

What are the benefits of using custom classes for argument passing?

Swipe to show menu

Definition

Data passing means sending information from one screen to another. This allows you to share user input, selections, or other values between different parts of your app.

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
            
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Passing Data Demo',
      home: FirstScreen(),
      routes: {
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

class FirstScreen extends StatelessWidget {
  final String message = "Hello from the First Screen!";

  @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.pushNamed(
              context,
              '/second',
              arguments: message,
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // The data will be extracted here in a later example
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Text('Awaiting data...'),
      ),
    );
  }
}

main.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
            
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Extract Arguments Demo',
      home: FirstScreen(),
      routes: {
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

class FirstScreen extends StatelessWidget {
  final String message = "Data sent from First Screen!";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Send Data'),
          onPressed: () {
            Navigator.pushNamed(
              context,
              '/second',
              arguments: message,
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)?.settings.arguments as String?;

    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Text(args ?? 'No data received.'),
      ),
    );
  }
}

Note

Type safety matters when passing data. Always cast arguments to the expected type and handle possible null values to prevent runtime errors.

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 3