How to Push and Get Values Between Routes In Flutter ?

· 3 min read
Push and Get Values Between Routes
Push and Get Values Between Routes

SharedPreference is used for sending data from one screen to another screen. So What if the user is not allowed to make use of SharedPreference So in this article we will learn about How to Push and Get Values Between Routes In Flutter?

How to Push and Get Values Between Routes In Flutter?

To send and get values between routes consider a HomePage as First Screen and ContaPage as Second Screen in Flutter. In Button Press, We have used a push from HomePage to ContaPage with Color as a parameter.

Code snippet like the below:

import "package:flutter/material.dart";

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "MyApp",
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new FlatButton(
          child: new Text("ok"),
          textColor: new Color(0xFF66BB6A),
          onPressed: () {
            Navigator.push(context, new MaterialPageRoute(
              builder: (BuildContext context) => new ContaPage(new Color(0xFF66BB6A)),
            ));
          },
        ),
      ],
    )
  );
}

class ContaPage extends StatelessWidget {
  ContaPage(this.color);
  final Color color;
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: color,
    ),
  );
}

Best Solution:

Arguments

class ScreenArguments {
  final String title;
  final String message;

  ScreenArguments(this.title, this.message);
}

Extract arguments

class ExtractArgumentsScreen extends StatelessWidget {
  static const routeName = '/extractArguments';

  @override
  Widget build(BuildContext context) {
    final ScreenArguments args = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text(args.title),
      ),
      body: Center(
        child: Text(args.message),
      ),
    );
  }
}

Register Route

MaterialApp(
  //...
  routes: {
    ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
    //...
  },     
)

Navigate

Navigator.pushNamed(
      context,
      ExtractArgumentsScreen.routeName,
      arguments: ScreenArguments(
        'Extract Arguments Screen',
        'This message is extracted in the build method.',
      ),
    );
  • Passing data from 1st Page to 2nd

In 1st page

// sending "Foo" from 1st page
Navigator.push(context, MaterialPageRoute(builder: (_) => Page2("Foo")));

In 2nd page.

class Page2 extends StatelessWidget {
  final String string;
  Page2(this.string); // receiving "Foo" in 2nd
}
  • Passing data back from 2nd Page back to 1st

In 2nd page

// sending "Bar" from 2nd
Navigator.pop(context, "Bar");

On the 1st page, it is the same which was used earlier but with little modification.

// receiving "Bar" in 1st
String received = await Navigator.push(context, MaterialPageRoute(builder: (_) => Page2("Foo")));

Conclusion:

Hope you like our Article.
In this article, we have been through How to Push and Get Values Between Routes In Flutter?

Thanks for Reading !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply