Skip to content

[Flutter] How to pass and receive parameters when the page navigation

Last Updated on 2021-05-30 by Clay

When we designing a mobile application, we are difficult to implement all of functions in just only one page, so we need to divide different functions to different pages.

For example: user is playing the game in the main page, but suddenly, he want to turn off the audio effect, so we can design a button to allow user navigate to the setting page to configure his default settings.

The article is record how to pass and receive the parameters when we navigating the page. Divided into the following three different situations:

  • Pass the parameters to StatelessWidget
  • Pass the parameters to StatefulWidget
  • Receive the parameters from page return

Pass the parameters to StatelessWidget

This is a simple sample code, it is consists of a input box and a button. If user press the button, the text of input box will pass to the next page (SecondPage).

Then we will display the text in the second page.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


void main() => runApp(MyApp());


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

// HomePage
class HomePage extends StatelessWidget {
  // TextEditingController
  TextEditingController _dataController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            TextField(
              autofocus: true,
              decoration: InputDecoration(
                labelText: "data:",
                hintText: "data will display on the second page",
                prefixIcon: Icon(Icons.font_download),
              ),
              obscureText: false,
              controller: _dataController,
            ),
            ElevatedButton(
              child: Text("Jump to second page"),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => SecondPage(
                          data: _dataController.text,
                        )
                    )
                );
              },
            ),
          ],
        )
      ),
    );
  }
}

// SecondPage
class SecondPage extends StatelessWidget {
  SecondPage({Key? key, required this.data}) : super(key: key);
  final String data;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
      body: Column(
        children: <Widget>[
          Text("the data is: $data"),
        ],
      ),
    );
  }
}



Output:

https://clay-atlas.com/wp-content/uploads/2021/05/Screen-Recording-2021-05-11-at-7.39.35-PM.mov

Pass the parameters to StatefulWidget

The pass method of StatefulWidget and StatelessWidget are different.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


void main() => runApp(MyApp());


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

// HomePage
class HomePage extends StatelessWidget {
  // TextEditingController
  TextEditingController _dataController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            TextField(
              autofocus: true,
              decoration: InputDecoration(
                labelText: "data:",
                hintText: "data will display on the second page",
                prefixIcon: Icon(Icons.font_download),
              ),
              obscureText: false,
              controller: _dataController,
            ),
            ElevatedButton(
              child: Text("Jump to second page"),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => SecondPage(
                          data: _dataController.text,
                        )
                    )
                );
              },
            ),
          ],
        )
      ),
    );
  }
}

// SecondPage
class SecondPage extends StatefulWidget {
  SecondPage({Key? key, required this.data}) : super(key: key);
  final String data;

  @override
  _SecondPageState createState() => _SecondPageState();
}

// _SecondPageState
class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
      body: Column(
        children: <Widget>[
          Text("the data is: ${widget.data}"),
        ],
      ),
    );
  }
}




Output:

https://clay-atlas.com/wp-content/uploads/2021/05/Screen-Recording-2021-05-11-at-7.56.54-PM.mov

The actual display effect is very similar to the previous case

Receive the parameters from page return

This method is more trouble. We need to build a asynchronous function to wait the second page return, and then we receive the parameter, update the HomePage status.

In addition, if we want to return parameters, we also need to create a button in the SecondPageState, and use Navigator.pop(conoetxt, data); to return the data parameter we want.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


void main() => runApp(MyApp());


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

// HomePage
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}


// HomePage
class _HomePageState extends State<HomePage> {
  // TextEditingController
  TextEditingController _dataController = TextEditingController();
  var returnTextContent = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
          child: Column(
            children: <Widget>[
              TextField(
                autofocus: true,
                decoration: InputDecoration(
                  labelText: "data:",
                  hintText: "data will display on the second page",
                  prefixIcon: Icon(Icons.font_download),
                ),
                obscureText: false,
                controller: _dataController,
              ),
              ElevatedButton(
                child: Text("Jump to second page"),
                onPressed: () {
                  _goSecondPage(context).then((value) {
                    setState(() {
                      returnTextContent = value;
                    });
                  });
                },
              ),
              SizedBox(
                height: 50.0,
              ),
              Text(
                returnTextContent.isNotEmpty ? returnTextContent : "No any return data",
              ),
            ],
          )
      ),
    );
  }

  // Go to the second page and receive the return value
  Future<String> _goSecondPage(BuildContext context) async {
    String returnText = await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SecondPage(
          data: _dataController.text,
        ),
      ),
    );

    print("TEST OUTPUT");
    print(returnText);

    return returnText;
  }
}


// SecondPage
class SecondPage extends StatelessWidget {
  SecondPage({Key? key, required this.data}) : super(key: key);
  final String data;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
      body: Center(
        child:Column(
          children: <Widget>[
            Text("the data is: $data"),
            ElevatedButton(
              child: Text("Jump back the home page"),
              onPressed: () {
                Navigator.pop(context, data);
              },
            ),
          ],
        ),
      ),
    );
  }
}



Output:

https://clay-atlas.com/wp-content/uploads/2021/05/Screen-Recording-2021-05-11-at-9.36.09-PM.mov

References

Read More

Tags:

Leave a ReplyCancel reply

Exit mobile version