How to pass data between screens in Flutter

In Flutter, just like any other application, passing data between different screens is crucial for effective communication between the mobile application.

Passing data between screens in Flutter

Flutter allows various methods to pass data and parameters between various screens. However, two methods are the most effective and are used commonly.

These two methods are:

  • Passing data using the constructor method.

  • Passing data using ModalRoute method.

We will be discussing these two methods in detail and explaining them with code examples.

Passing data using constructors in Flutter

The constructor method allows the user to define parameters while initializing a class on a screen. Consequently, the variable initialized in the source screen can then be passed through the constructors of the destination screen.

Defining the source screen

The source screen in this context would be the screen from where we gather the input from the user and pass it to the destination screen using Navigator.push().

For ease, we will call the source screen, ScreenOne. The code should look something like this.

class ScreenOne extends StatefulWidget {
  @override
  _ScreenOneState createState() => _ScreenOneState();
}
class _ScreenOneState extends State<ScreenOne> {
  String inputData = '';
  // Further code for inputting the data
}
Initializing ScreenOne

Here, we have a stateful widget called ScreenOne that has an attribute inputData. This variable will be passed to the destination screen later on.

Navigating to the destination screen

ScreenTwo would be the destination screen in our context. Hence to navigate to it we will use Navigator.push() method.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => ScreenTwo(data: inputData),
  ),
);
Pushing the data to ScreenTwo

Here we use MaterialpageRoute to navigate to ScreenTwo and pass the inputData in its constructor.

Receiving data in the destination screen

The passed data is now accessible in ScreenTwo. Here is how it's made possible.

class ScreenTwo extends StatelessWidget {
  final String data;
  ScreenTwo({ @required this.data});
  // Rest of the code
}
Receiving the data from ScreenOne

Here, the data parameter of ScreenTwo holds the passed data. We can now use this data in the destination screen as needed.

The data can be passed with or without using the @required method in the destination constructor. This indicates whether a variable must be assigned a value or not while creating an object of the class.

You can learn more about the @required annotation here.

# This file tracks properties of this Flutter project.
# Used by Flutter tool to assess capabilities and perform upgrades etc.
#
# This file should be version controlled.

version:
  revision: 796c8ef79279f9c774545b3771238c3098dbefab
  channel: stable

project_type: app

# Tracks metadata for the flutter migrate command
migration:
  platforms:
    - platform: root
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab
    - platform: android
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab
    - platform: ios
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab
    - platform: linux
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab
    - platform: macos
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab
    - platform: web
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab
    - platform: windows
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab

  # User provided section

  # List of Local paths (relative to this file) that should be
  # ignored by the migrate tool.
  #
  # Files that are not part of the templates will be ignored by default.
  unmanaged_files:
    - 'lib/main.dart'
    - 'ios/Runner.xcodeproj/project.pbxproj'
Passing data between two screen using constructor method

Here, you can see the two files ScreenOne.dart , and ScreenTwo.dart in the lib folder, which incorporates all the code that was discussed above.

Passing data using the ModalRoute method in Flutter

This method allows us to pass data between screens in Flutter using the ModalRoute.of(). Let's see how it's made possible.

We can define the ScreenOne as we did above. However, we have to incorporate RouteSettings into the Navigator.push method. This can be done in the following way.

Passing data to the destination screen

Navigator.push(

  context,

  MaterialPageRoute(

    builder: (context) => ScreenTwo(),

    settings: RouteSettings(arguments: inputData),

  ),

);
Passing input data to ScreenTwo

By providing the arguments parameter with the desired data, we ensure that the data is accessible in ScreenTwo using the ModalRoute method.

Receiving the data in the destination screen

We can utilize the ModalRoute.of() method to access the current route and extract the data from it. Here is how to do it.

class ScreenTwo extends StatelessWidget {

  // Rest of the code



  String? data;



  @override

  Widget build(BuildContext context) {

    data = ModalRoute.of(context)?.settings.arguments as String?;



    return Scaffold(

      // Rest of the code

    );

  }

}
Receiving data from ScreenOne

In this example, we define a data variable in ScreenTwo to store the passed data. Using this, we can extract the data from the current route's settings and assign it to data.

# This file tracks properties of this Flutter project.
# Used by Flutter tool to assess capabilities and perform upgrades etc.
#
# This file should be version controlled.

version:
  revision: 796c8ef79279f9c774545b3771238c3098dbefab
  channel: stable

project_type: app

# Tracks metadata for the flutter migrate command
migration:
  platforms:
    - platform: root
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab
    - platform: android
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab
    - platform: ios
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab
    - platform: linux
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab
    - platform: macos
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab
    - platform: web
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab
    - platform: windows
      create_revision: 796c8ef79279f9c774545b3771238c3098dbefab
      base_revision: 796c8ef79279f9c774545b3771238c3098dbefab

  # User provided section

  # List of Local paths (relative to this file) that should be
  # ignored by the migrate tool.
  #
  # Files that are not part of the templates will be ignored by default.
  unmanaged_files:
    - 'lib/main.dart'
    - 'ios/Runner.xcodeproj/project.pbxproj'
Passing data between two screens using ModalRoute method

Here, you can see the two files, ScreenOne.dart and ScreenTwo.dart,in the lib folder, which incorporates the ModalRoute method to pass the input data from ScreenOne to ScreenTwo.

New on Educative
Learn to Code
Learn any Language as a beginner
Develop a human edge in an AI powered world and learn to code with AI from our beginner friendly catalog
🏆 Leaderboard
Daily Coding Challenge
Solve a new coding challenge every day and climb the leaderboard

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved