How to store the items in one page in Flutter

Question

SCENARIO

There are three pages, first page is Home Page which loads the image and name, second page is the Quantity Page once i select any of the image in the first page (homepage) it moves to second page(Quantity Page) which shows the details of the image, price and quantity and the third page is Cart Page which store the item in a listview builder once i click on the button in the second page(Quantity Page).

QUESTION

Now question is once i click on the button in the second page i can able to pass the variables (name,price etc) to third page but how do i store the item in third page because if i want to select another item in the first page(home page) then that previous selected item must be present in the third page(cart page). Below is the dart code of the these three pages.

HomePage.dart

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();}
class _HomeState extends State<Home> {
  var productList = [{
      "name": "Cake",
      "image": "assets/1.png",
      "price": "20.00",},
{
      "name": "Pasteries",
      "image": "assets/2.png",
      "price": "30.00",},];
  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
        body: ListView.builder(
            itemCount: productList.length,
            itemBuilder: (BuildContext context, int index) {
              return Products(
                product_image: productList[index]['image'],
                product_name: productList[index]['name'],
                product_price: productList[index]['price'],
              );}));}}
class Products extends StatelessWidget {
  final product_name;
  final product_image;
  final product_price;
  Products({this.product_name, this.product_image, this.product_price});
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 35.0, bottom: 15.0, left: 20.0, right: 20.0),
      child: GestureDetector(
        onTap: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context) => Quantities(
            productname: product_name,
            productprice: product_price,
            productimage: product_image,)));},
        child: Container(
          child: new FittedBox(
            child: Material(
                color: Colors.white,
                elevation: 15.0,
                borderRadius: BorderRadius.circular(15.0),
                shadowColor: Color(0x802196F3),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      width: 250,
                      height: 200,
                      child: ClipRRect(
                        borderRadius: new BorderRadius.circular(15.0),
                        child: new Image.asset(
                          product_image,
                          fit: BoxFit.cover,),),),
                    Padding(
                      padding: const EdgeInsets.only(top: 5.0,bottom: 5.0),
                      child: Text(product_name,style: TextStyle(color: Colors.blueGrey[700],
                          fontWeight: FontWeight.bold,fontSize: 18.0),),),],)),),),),);}}

Quantities.dart

class Quantities extends StatefulWidget {
  var productprice;
  final productimage;
  final productname;
  Quantities({this.productprice, this.productimage,this.productname});
  @override
  _QuantitiesState createState() => _QuantitiesState(productprice,productimage,productname);}
class _QuantitiesState extends State<Quantities> {
  int counter = 1;
  var productprice;
  var finalprice;
  final productimage;
  final productname;
  _QuantitiesState(this.productprice, this.productimage,this.productname);
  void increment() {
    setState(() {
      counter++;
    finalprice=double.parse(productprice)*counter;});}
  void decrement() {
    setState(() {
      counter--;
      finalprice=double.parse(productprice)*counter;});}
  @override
  void initState() {
    super.initState();
    finalprice=double.parse(productprice);}
  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        backgroundColor: Colors.lightBlue[900],
        title: Text('Quantities'),),
      body: Padding(
        padding: const EdgeInsets.only(top: 10.0),
        child: ListView(
          children: <Widget>[
            new Container(
              height: 200.0,
              child: GridTile(
                child: Container(
                  color: Colors.white,
                  child: Image.asset(productimage),),),),
            Center(
              child: Text(
                "Price: "+finalprice.toString()+" SAR",
                style:
                TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),),),
            Padding(
              padding: const EdgeInsets.only(top: 10.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(right: 10.0),
                    child: PlatformButton(
                        onPressed: () {
                          decrement();
                          if (counter < 1) {
                            counter = 1;
                            finalprice=productprice;}},
                        child: Text(
                          '-',style: TextStyle(color: Colors.white, fontSize: 30.0),),
                        androidFlat: (_) =>
                            MaterialFlatButtonData(color: Colors.cyan),
                        ios: (_) => CupertinoButtonData(
                            color: Colors.cyan)),
                  ),Text(
                    '$counter',style:TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),),
                  Padding(
                    padding: const EdgeInsets.only(left: 10.0),
                    child: PlatformButton(
                        onPressed: () {increment();},
                        child: Text(
                          '+',style: TextStyle(color: Colors.white, fontSize: 30.0),),
                        androidFlat: (_) =>
                            MaterialFlatButtonData(color: Colors.cyan),
                        ios: (_) => CupertinoButtonData(
                            color: Colors.cyan)),),],),),
            Padding(
              padding: const EdgeInsets.only(top: 20.0),
              child: Center(
                child: PlatformButton(
                    onPressed: () {
                      Navigator.of(context).push(MaterialPageRoute(builder: (context) => Cart(
                        pImage: productimage,
                        pPrice: finalprice.toString(),)));},
                    child: Text('Add to Cart',style: TextStyle(color: Colors.white),),
                    androidFlat: (_) => MaterialFlatButtonData(
                        color: Colors.cyan),
                    ios: (_) => CupertinoButtonData(
                        color: Colors.cyan
                    )),),),],),),);}}

Cart.dart

class Cart extends StatefulWidget {
  final pImage;
  var pPrice;
  Cart({this.pImage, this.pPrice});
  @override
  _CartState createState() => _CartState(pImage,pPrice);}
class _CartState extends State<Cart> {
  final pImage;
  var pPrice;
  _CartState(this.pImage, this.pPrice);
  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        backgroundColor: Colors.lightBlue[900],
        automaticallyImplyLeading: false,
        title: Text('Cart'),),
      body: ListView(
        children: <Widget>[
          Card(
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Text(pPrice),],),
                    Container(
                      height: 100.0,
                      width: 50.0,
                      child: Image.asset(pImage),),],)],),),],),);}}

Answer 1

What you are looking for is a state management solution because you want to preserve the state (in this case the state is the list of currently selected products across screens) You can do that by creating a class that represents the state and in this class you save the items that should be shared across multiple screens Then you can use a state management solution like provider or bloc to help you build widgets that can listen to this state change and update accordingly. I recommend you to look for some tutorials like this one from Reso coder to learn more about state management in flutter.