Summary  
This chapter explains how to pass data between screens during navigation by supplying arguments to `Navigator.push` (or named routes), retrieving them in the destination via `ModalRoute.of(context)?.settings.arguments`, and enforcing type safety by casting to custom argument classes.  

General domain of usage  
Mobile app user interface navigation and data flow.

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.

Definition

Watch this video for a clear, step-by-step demonstration of how to pass data between screens in Flutter. You'll see how to send arguments during navigation, extract them in the receiving screen, and update your UI based on the data received. This visual guide reinforces the concepts and code examples covered in this chapter.

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`.

aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7Cgp2b2lkIG1haW4oKSA9PiBydW5BcHAoTXlBcHAoKSk7CgpjbGFzcyBNeUFwcCBleHRlbmRzIFN0YXRlbGVzc1dpZGdldCB7CiAgQG92ZXJyaWRlCiAgV2lkZ2V0IGJ1aWxkKEJ1aWxkQ29udGV4dCBjb250ZXh0KSB7CiAgICByZXR1cm4gTWF0ZXJpYWxBcHAoCiAgICAgIHRpdGxlOiAnUGFzc2luZyBEYXRhIERlbW8nLAogICAgICBob21lOiBGaXJzdFNjcmVlbigpLAogICAgICByb3V0ZXM6IHsKICAgICAgICAnL3NlY29uZCc6IChjb250ZXh0KSA9PiBTZWNvbmRTY3JlZW4oKSwKICAgICAgfSwKICAgICk7CiAgfQp9CgpjbGFzcyBGaXJzdFNjcmVlbiBleHRlbmRzIFN0YXRlbGVzc1dpZGdldCB7CiAgZmluYWwgU3RyaW5nIG1lc3NhZ2UgPSAiSGVsbG8gZnJvbSB0aGUgRmlyc3QgU2NyZWVuISI7CgogIEBvdmVycmlkZQogIFdpZGdldCBidWlsZChCdWlsZENvbnRleHQgY29udGV4dCkgewogICAgcmV0dXJuIFNjYWZmb2xkKAogICAgICBhcHBCYXI6IEFwcEJhcih0aXRsZTogVGV4dCgnRmlyc3QgU2NyZWVuJykpLAogICAgICBib2R5OiBDZW50ZXIoCiAgICAgICAgY2hpbGQ6IEVsZXZhdGVkQnV0dG9uKAogICAgICAgICAgY2hpbGQ6IFRleHQoJ0dvIHRvIFNlY29uZCBTY3JlZW4nKSwKICAgICAgICAgIG9uUHJlc3NlZDogKCkgewogICAgICAgICAgICBOYXZpZ2F0b3IucHVzaE5hbWVkKAogICAgICAgICAgICAgIGNvbnRleHQsCiAgICAgICAgICAgICAgJy9zZWNvbmQnLAogICAgICAgICAgICAgIGFyZ3VtZW50czogbWVzc2FnZSwKICAgICAgICAgICAgKTsKICAgICAgICAgIH0sCiAgICAgICAgKSwKICAgICAgKSwKICAgICk7CiAgfQp9CgpjbGFzcyBTZWNvbmRTY3JlZW4gZXh0ZW5kcyBTdGF0ZWxlc3NXaWRnZXQgewogIEBvdmVycmlkZQogIFdpZGdldCBidWlsZChCdWlsZENvbnRleHQgY29udGV4dCkgewogICAgLy8gVGhlIGRhdGEgd2lsbCBiZSBleHRyYWN0ZWQgaGVyZSBpbiBhIGxhdGVyIGV4YW1wbGUKICAgIHJldHVybiBTY2FmZm9sZCgKICAgICAgYXBwQmFyOiBBcHBCYXIodGl0bGU6IFRleHQoJ1NlY29uZCBTY3JlZW4nKSksCiAgICAgIGJvZHk6IENlbnRlcigKICAgICAgICBjaGlsZDogVGV4dCgnQXdhaXRpbmcgZGF0YS4uLicpLAogICAgICApLAogICAgKTsKICB9Cn0=

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.

aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7Cgp2b2lkIG1haW4oKSA9PiBydW5BcHAoTXlBcHAoKSk7CgpjbGFzcyBNeUFwcCBleHRlbmRzIFN0YXRlbGVzc1dpZGdldCB7CiAgQG92ZXJyaWRlCiAgV2lkZ2V0IGJ1aWxkKEJ1aWxkQ29udGV4dCBjb250ZXh0KSB7CiAgICByZXR1cm4gTWF0ZXJpYWxBcHAoCiAgICAgIHRpdGxlOiAnRXh0cmFjdCBBcmd1bWVudHMgRGVtbycsCiAgICAgIGhvbWU6IEZpcnN0U2NyZWVuKCksCiAgICAgIHJvdXRlczogewogICAgICAgICcvc2Vjb25kJzogKGNvbnRleHQpID0+IFNlY29uZFNjcmVlbigpLAogICAgICB9LAogICAgKTsKICB9Cn0KCmNsYXNzIEZpcnN0U2NyZWVuIGV4dGVuZHMgU3RhdGVsZXNzV2lkZ2V0IHsKICBmaW5hbCBTdHJpbmcgbWVzc2FnZSA9ICJEYXRhIHNlbnQgZnJvbSBGaXJzdCBTY3JlZW4hIjsKCiAgQG92ZXJyaWRlCiAgV2lkZ2V0IGJ1aWxkKEJ1aWxkQ29udGV4dCBjb250ZXh0KSB7CiAgICByZXR1cm4gU2NhZmZvbGQoCiAgICAgIGFwcEJhcjogQXBwQmFyKHRpdGxlOiBUZXh0KCdGaXJzdCBTY3JlZW4nKSksCiAgICAgIGJvZHk6IENlbnRlcigKICAgICAgICBjaGlsZDogRWxldmF0ZWRCdXR0b24oCiAgICAgICAgICBjaGlsZDogVGV4dCgnU2VuZCBEYXRhJyksCiAgICAgICAgICBvblByZXNzZWQ6ICgpIHsKICAgICAgICAgICAgTmF2aWdhdG9yLnB1c2hOYW1lZCgKICAgICAgICAgICAgICBjb250ZXh0LAogICAgICAgICAgICAgICcvc2Vjb25kJywKICAgICAgICAgICAgICBhcmd1bWVudHM6IG1lc3NhZ2UsCiAgICAgICAgICAgICk7CiAgICAgICAgICB9LAogICAgICAgICksCiAgICAgICksCiAgICApOwogIH0KfQoKY2xhc3MgU2Vjb25kU2NyZWVuIGV4dGVuZHMgU3RhdGVsZXNzV2lkZ2V0IHsKICBAb3ZlcnJpZGUKICBXaWRnZXQgYnVpbGQoQnVpbGRDb250ZXh0IGNvbnRleHQpIHsKICAgIGZpbmFsIGFyZ3MgPSBNb2RhbFJvdXRlLm9mKGNvbnRleHQpPy5zZXR0aW5ncy5hcmd1bWVudHMgYXMgU3RyaW5nPzsKCiAgICByZXR1cm4gU2NhZmZvbGQoCiAgICAgIGFwcEJhcjogQXBwQmFyKHRpdGxlOiBUZXh0KCdTZWNvbmQgU2NyZWVuJykpLAogICAgICBib2R5OiBDZW50ZXIoCiAgICAgICAgY2hpbGQ6IFRleHQoYXJncyA/PyAnTm8gZGF0YSByZWNlaXZlZC4nKSwKICAgICAgKSwKICAgICk7CiAgfQp9

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

Note

How do you access arguments passed to a screen in Flutter?

Learn the essential skills to build simple, visually appealing Android and iOS apps using Flutter. This course covers Dart fundamentals, Flutter project structure, UI building blocks, navigation, and theming to help you create robust mobile applications.

Get introduced to Flutter and Dart, their relationship, and the core concepts that power Flutter app development.

Dive into the widget-based architecture of Flutter and understand how the widget tree and build context work.

Master the essential widgets and layout systems for building clean and responsive Flutter UIs.

Implement navigation in your Flutter apps using Navigator, named routes, and data passing techniques.

Passing Data Between Screens