Mohd Asymawi
Mohd Asymawi

Reputation: 27

how to passing the data to the other page in flutter?

I am trying to pass data from one page to another page. My GUI is like this:

First Page:

enter image description here

Second Page:

enter image description here

Third Page:

enter image description here

The issue here is that, when the user pressed the breakfast/lunch/dinner button, they will be going to the second page which displays all the restaurant lists. And when the users press the restaurant list, they will be able to see the menu list according to the categories above. But I am not capable of carrying the categories value selection to the next page which I need the keyword to sent to the database.

The categories navigation:

child: InkWell(onTap: (){
                  if(categoriesList[index].name == "Breakfast"){
                    Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context)=> new restaurantLISTVIEW()));
                    }
                  else if(categoriesList[index].name == "Lunch"){
                    Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context)=> new restaurantLISTVIEW()));
                  }
                  else if(categoriesList[index].name == "Dinner"){
                    Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context)=> new restaurantLISTVIEW()));
                  }
                },

The keyword needs to sent to the third page of selection categories which the code is:

  Future<List> getData() async{

var url = 'http://10.0.2.2/foodsystem/breakfastlist.php';
var data = {
  'product_type': 'breakfast',
  'product_owner': widget.list[widget.index]['restaurant_id'],
};
var response = await http.post(url, body: json.encode(data));
//final response= await http.get("http://10.0.2.2/foodsystem/getdata.php");
return json.decode(response.body);}

I am not sure how to pass the categories value of breakfast/lunch/dinner from the first page to the third page.

Upvotes: 1

Views: 899

Answers (2)

dm_tr
dm_tr

Reputation: 4763

Your second page must receive the category by witch to fetch the corresponding restaurants list

class SecondPage extends StatefulWidget {

  String category;
  SecondPage({this.category});

  @override
  State<StatefulWidget> createState() => _SecondPageState();

  //...
}

class _SecondPageState extends State<SecondPage> {
  List restaurants;

  @override
  void initState() {
    super.initState();

    restaurants = [];
  }

  void fetchRestaurants() {
    // fetch restaurants by category using widget.category
  }

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

Thus, your InkWell will look like this

InkWell(
  onTap: (){
    Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context)=> new SecondPage(category: categoriesList[index].name)));
  },
)

Upvotes: 1

dshukertjr
dshukertjr

Reputation: 18612

Here is a simple example. Basically, you would have to pass the category value to the second page, and from the second page to third page:

class CategoryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {
        Navigator.of(context).push(
          MaterialPageRoute<void>(
            builder: (context) => RestaurantsPage(
              category: 'dinner',
            ),
          ),
        );
      },
      child: Text('Dinner'),
    );
  }
}

class RestaurantsPage extends StatelessWidget {
  final String category;

  const RestaurantsPage({
    Key key,
    @required this.category,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {
        Navigator.of(context).push(
          MaterialPageRoute<void>(
            builder: (context) => MenuPage(
              category: 'dinner',
              restaurant: 'restaurantA',
            ),
          ),
        );
      },
      child: Text('Restaurant A'),
    );
  }
}

class MenuPage extends StatefulWidget {
  final String category;
  final String restaurant;

  const MenuPage({Key key, @required this.category, @required this.restaurant})
      : super(key: key);

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

class _MenuPageState extends State<MenuPage> {
  @override
  void initState() {
    // Get menus using category and restaurant
    getMenus(category: widget.category, restaurant: widget.restaurant);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Upvotes: 0

Related Questions