I have a rewards page that displays certain menu items as rewards that can be purchased using points. I am using a firebase real-time database and have managed to populate the rewards page using a stream builder.

Below is what one of the reward records contains.

R1
  description:"Tasy milk shake"
  menuItemID:"J1"
  pointCost:20
  rewardName:"Milk Shake"

The reward record contains the menuItem which is the primary key of the the actual menu item with all the full details for that item

Once a reward is clicked/pressed it goes to a new page which will be the full details of the meal.

In order to have one single widget to display all meals (i.e. the widget is populated dynamically instead of having a number of hard coded widgets) I need to pass the menuItemID to the next page so I can fetch the details of that meal and then display them.

Below I have the code I am currently using to populate the rewards page with data from my database:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: StreamBuilder(
                stream: _dbRef.onValue,
                builder: (context, snapshot) {

                  if (snapshot.hasData) {
                    final myRewards = Map<String, dynamic>.from(
                        (snapshot.data! as DatabaseEvent).snapshot.value
                            as Map<dynamic, dynamic>);

                    myRewards.forEach((key, value) {
                      print(
                          '******************************************* => $myRewards');
                      final nextReward = Map<String, dynamic>.from(value);
                      itemID = nextReward['menuItemID'].toString();

                      print(
                          '^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ => $itemID');

                      final rewardTile = ListTile(
                          onTap: () => Navigator.of(context).push(
                              MaterialPageRoute(
                                  builder: (context) =>
                                      RewardItemPage())),
                          tileColor: Colors.red,
                          leading: const Icon(Icons.local_cafe), //
                          title: Text(nextReward['menutItemID']), //
                          subtitle: Text(
                              'Points: ${nextReward['pointCost'].toString()}'));
                      tilesList.add(rewardTile);
                    });
                  }
                  return Expanded(
                      child: ListView(
                    children: tilesList,
                  ));
                })
                )
                );

I am able to get each ID but how do I pass the right ID to the next page based on click?

please help!

CodePudding user response：

Step 1 :Add required field in rewarditempage(). Look at this link

Step 2 :pass value like this

ontap: () => navigator.of(context).push( materialpageroute( builder: (context) => rewarditempage(item: itemID)))

CodePudding user response：

there are two ways you can pass data to another screen

1. Using constructor of new widget
2. passing data in route settings

refer here