Share Data Between Screens

As a Flutter developer, you might think about how can we show some data from one screen to another i.e. how to share data between screens. And the question is very simple yet crucial.

Commonly there are 3 techniques -

Using Constructor Parameters
Using Navigation Arguments
Using State Management

In this blog, I am going to show the most basic technique i.e. using constructor parameters. Demo project link - https://github.com/Anirban-Chand/flutter-data-sharing-demo1

!! Pre-requisite Alert - Concept of Constructors

Step-1:

Create a destination screen(stateful/stateless) with a constructor that accepts the data as a parameter.

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  final String msg;

  const SecondScreen({super.key, required this.msg});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Destination Screen'),
      ),
      body: Center(
        child: Text(msg),
      ),
    );
  }
}

In the above code, we have a 'DestinationScreen' stateless widget that accepts 'msg' as a parameter that will be passed from the source screen. The datatype can be anything(for simplicity I took string). The received msg/data will be shown on the destination screen. For stateless widgets we can access the parameter directly as the parameter and our functions are under the same class.

import 'package:flutter/material.dart';

class ThirdScreen extends StatefulWidget {
  final String data;
  const ThirdScreen({super.key, required this.data});

  @override
  State<ThirdScreen> createState() => _ThirdScreenState();
}

class _ThirdScreenState extends State<ThirdScreen> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Another Destination Screen'),
      ),
      body: Center(child: Text(widget.data)),
    );
  }
}

In the above code, there is 'AnotherDestinationScreen' which is stateful in nature and accepts 'data' as a parameter. The received data will be shown on this screen. For stateful widgets, we can access the parameter using "widget.<parameter_name>" (here widget.data).

Step-2:

In the source screen, when you want to navigate to the destination screens, pass the data as named parameters. And you can pass as many parameters as you want(not recommended).

Navigator.push(context, 
               MaterialPageRoute(builder: (context) =>
                      SecondScreen(msg: _controller1.text)));

By following these steps, you can share data between different screens using constructors in Flutter. Remember to define the constructor in the destination screen and pass the data when navigating to the screen.

Demo project for better understanding - https://github.com/Anirban-Chand/flutter-data-sharing-demo1.

Star, Fork, Experiment!

Share Data Between Screens - Flutter

Using Constructor Parameters

Share Data Using Constructor Parameters