How do I pass data to stateless widget in Flutter

Published February 16, 2022

While working on flutter application we may need data to pass one screen to other screen. In this flutter example we will see how to pass data to a stateless widget. Suppose we have two stateless widgets ScreenA and ScreenB, now we need to pass data from ScreenA to ScreenB.

In this example we will see pass data to stateless widget by

Pass by Direct Navigation
Pass by Route Setting

Direct navigation:
In this method we just pass the parameters inside constructor

Navigator.push(context, MaterialPageRoute(builder: (ctx){
  Map<String,dynamic>param=Map();
  param['a']="Screen Navigation a";
  param['b']="Screen Navigation b";
  return ScreenB(param1:"Navigation", param2: param,);
}));

Pass by Route Setting
If we want to pass the data though Routes we will pass them as args

Map<String,dynamic>param=Map();
param['a']="Screen Navigation a";
param['b']="Screen Navigation b";

Map<String,dynamic>args=Map();
args['param1']="Text Parameters";
args['param2']=param;

Navigator.pushNamed(context, "screenb",arguments: args);

Now to read on Routes we will use below code and navigate to the ScreenB Page

Map<String,dynamic>map=args as Map<String,dynamic>;

return MaterialPageRoute(builder: (ctx){
  return ScreenB(param1:map['param1'] as String ,param2:map['param2'] ,);
});

Let's Implement How to pass data to Stateless widget in flutter

Step 1: Create Flutter Application

Step 2: Create two stateless widgets ScreenA and ScreenB

import 'package:flutter/material.dart';
import 'package:prevent_screen/screen_b.dart';
class ScreenA extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,

        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Container(
                width: double.infinity,
                child: Text("Pass Data to Stateless widget",style: TextStyle(fontSize: 20,),)),
          ),
          TextButton(
          style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red)),
          onPressed: (){
            Navigator.push(context, MaterialPageRoute(builder: (ctx){
              Map<String,dynamic>param=Map();
              param['a']="Screen Navigation a";
              param['b']="Screen Navigation b";
              return ScreenB(param1:"Navigation", param2: param,);
            }));
          }, child: Text("Navigator",style: TextStyle(fontSize: 20,color: Colors.white))),
          TextButton(
              style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red)),
              onPressed: (){
                Map<String,dynamic>param=Map();
                param['a']="Screen Navigation a";
                param['b']="Screen Navigation b";

                Map<String,dynamic>args=Map();
                args['param1']="Text Parameters";
                args['param2']=param;

                Navigator.pushNamed(context, "screenb",arguments: args);
              }, child: Text("By Route Settings",style: TextStyle(fontSize: 20,color: Colors.white))),
        ],
      ),
    );
  }

}

import 'package:flutter/material.dart';
class ScreenB extends StatelessWidget{
  String param1;
  Map<String,dynamic>param2;
  ScreenB({required this.param1,required this.param2});
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 10,),
            Text("Data from Param 1 ${param1}",style: TextStyle(fontSize: 20,color: Colors.black)),
            SizedBox(height: 10,),
            Divider(color: Colors.black,thickness: 1,),
            SizedBox(height: 10,),
            Text("Data from Params as Map ${param2['a']}",style: TextStyle(fontSize: 20,color: Colors.black)),
          ],
        ),
      ),
    );
  }

}

Step 3: Create Routes Page with below code


import 'package:flutter/material.dart';
import 'package:prevent_screen/screen_a.dart';
import 'package:prevent_screen/screen_b.dart';

import 'error.dart';

class RouteGenerator {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    final dynamic args = settings.arguments;

    switch (settings.name) {
      case "/":
        return MaterialPageRoute(builder: (ctx){
          return ScreenA();
        });
      case 'screenb':
        Map<String,dynamic>map=args as Map<String,dynamic>;

        return MaterialPageRoute(builder: (ctx){
          return ScreenB(param1:map['param1'] as String ,param2:map['param2'] ,);
        });
      default:
        return MaterialPageRoute(builder: (ctx){
          return ErrorPage();
        });
    }
    }
    }

Step 4: Update main.dart file with below code

import 'package:flutter/material.dart';
import 'package:prevent_screen/route_settings.dart';
import 'package:prevent_screen/screen_a.dart';

void main() {
  runApp( MaterialApp(
    theme: ThemeData(

      appBarTheme: AppBarTheme(
        color: Colors.green
      )
    ),
    initialRoute: "/",
      onGenerateRoute: RouteGenerator.generateRoute,
      home: ScreenA()));
}

Run Application

Flutter pass data between stateless widgets

Conclusion: In this flutter application we covered how to pass data between two screens.

Article Contributed By :

952 Views

Projects By category