how can i get individual data variables into another page after building a function in flutter?

user_15145059 0
Viewed 74

how can i get individual data variables into another page after building a function that displays them all

This is the calling of the function which i will be using php for later to query list of them from the database.

      buildOrderItem('images/shoe.jpg', "Men's Italian Shoe", 150.00),
      buildOrderItem('images/suit.jpg', 'FloTextile Suit', 450.00),
      buildOrderItem('images/heels.jpg', "Women's Heel", 200.00),

and this is the function

Container buildOrderItem(imagelink, productName, price) {
    return Container(
      child: InkWell(
        onTap: () {
          Navigator.push(
              context,
              new MaterialPageRoute(
                  builder: (context) => new ProductPage()));
        },
        child: Container(
          margin: EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 10),
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(10)),
          child: Column(
            children: [
              Container(
                child: Image.asset(
                  imagelink,
                  width: 250,
                  height: 150,
                  fit: BoxFit.scaleDown,
                ),
              ),
              Container(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      padding: EdgeInsets.all(20),
                      child: Text(
                        productName,
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(20),
                      child: Text(
                        'N' + price.toString(),
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.deepOrange),
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );

from the ontap, how can i pass the data variables (imagelink, productName, price) from the particular product i click into the next screen...

onTap:(){
          Navigator.push(
            context,
              new MaterialPageRoute(
                  builder: (context) => new ProductPage()));
            },

i tried sending the variables as parameters into the routes but I'm receiving null.

kindly help, thanks

dart flutter
2 Answers
buildOrderItem(
                        'assets/images/researcher.png',
                        "mans's Heel",
                        200.00,
                        () {
                          Navigator.push(
                            context,
                            new MaterialPageRoute(
                              builder: (context) =>
                                  ProductPage('mans\'s Heel'),
                            ),
                          );
                        },
                      ),

then on this section do this

Widget buildOrderItem(imagelink, productName, price, Function ontap) {
  return Container(
    child: InkWell(
      onTap: ontap,
      child: Container(
        margin: EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 10),
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(10)),
        child: Column(
          children: [
            Container(
              child: Image.asset(
                imagelink,
                width: 250,
                height: 150,
                fit: BoxFit.scaleDown,
              ),
            ),
            Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    padding: EdgeInsets.all(20),
                    child: Text(
                      productName,
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.all(20),
                    child: Text(
                      'N' + price.toString(),
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.deepOrange),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}
user_125856150

Just create constructor for your ProductPage and pass your variables to there

class ProductPage extends StatelessWidget { /* Or StatefulWidget and then in the State use these variable like widget.someVariable*/
  ProductPage({
      required this.someVariable,
      required this.someVariable2,
      required this.someVariable3,
      Key? key,
    }) : super(key: key);


  final String someVariable;
  final String someVariable2;
  final double someVariable3;
 
  //...
}

To pass these variables:

//...

ProductPage(
    someVariable: 'Some value',
    someVariable2: 'Some value',
    someVariable3: 101.12,
)

//...

You should also create a class Product that will contain these variables (better with final keyword) and then pass this class

If you want to have your product in a few pages, you should use InheritedWidget or provider package (it actually uses InheritedWidget and it is just easyer and more convinient)

user_146073580
Related