Moving data across pages in Flutter

I want to be able to transfer data from one screen to another. What I have now does work, but I want to be able to have icon in the AppBar that will only go to the second page, and not take any arguments. For now I have this:

FIRST PAGE

This is the icon on the first page that adds the list tile arguments to the Cart screen (and only adds , it doesn't push the Cart screen, that should be done below in the appbar.

child: IconButton(
                        icon: Icon(Icons.add),
                       
                        onPressed: () => MaterialPageRoute(
                              
                              builder: (context) =>
                                  Cart(person.name, person.surname),
                            )),

Below in the scaffold I have this in the AppBar, the icon that should only push the Cart screen, and not any other values.

IconButton(
            icon: Icon(Icons.add_shopping_cart, color: Colors.white),
            //this will be the cart window ontap, change icon to something better
            onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (BuildContext context) =>
                        Cart(//there should be arguments here, but I just want to go to Cart screen, the arguments were added in the first icon))),

This Cart class requires arguments (from the second page, like personName, personSurname), but I just want to be able to push the second screen, and not have any arguments on there. It is the small cart icon in the appbar.

SECOND PAGE

Here is the second page (sudo cart screen) that should just take in the arguments from the first one.

 class Cart extends StatefulWidget {
  
  final String personName;
  final String personSurname;
  Cart(this.personName, this.personSurname);

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

class _CartState extends State<Cart> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cart'),
        centerTitle: true,
      ),
      body: Center(
          child: Container(
              child: Text('${widget.personName}, ${widget.personSurname}'))),
    );
  }
}

My issue is that I want to have the 2 separate functions for the cart. First one is on the first page where first icon only adds the whatever argument I want to the cart, and the second icon in the app bar of first page just pushes the Cart screen.

In the second screen, I just want to have whatever data pushed from the first page.

1 answer

  • answered 2020-11-20 12:09 intraector

    Try it like this:

    1. Declare two variables above:
    String name = '';
    String surname = '';
    
    1. Assign your data to them:
    child: IconButton(
             icon: Icon(Icons.add),
             onPressed: () {
               name = person.name;
               surname = person.surname;
             },
    
    1. And use them as arguments:
    IconButton(
        icon: Icon(Icons.add_shopping_cart, color: Colors.white),
        onPressed: () => Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (BuildContext context) =>  Cart(name, surname))
                    ),