How to navigate to another page but show information according to the items on my list that was pressed?

妖精的绣舞 提交于 2019-12-25 00:37:24

问题


I'm trying to create my first app with flutter, it's a basic app to show items on a list and you tap on them to get the information. I've created the list and the contact page, I can navigate from one page to the other but I'm stuck now on how to make flutter show the information according to the contact I choose on the list, so I dont need to write one class for each contact. Is there a way to do it?

import 'package:flutter/material.dart';
import 'package:whatsapp_casimiro/contacts/contact_page.dart';
import 'package:whatsapp_casimiro/listas/lanchonetes.dart';

class LanchonetesScreen extends StatelessWidget {
final List<Lanchonetes> _allLanchonetes = 
Lanchonetes.allLanchonetes();

@override
Widget build(BuildContext context) {
return Scaffold(body: getLanchonetesPageBody(context));
}

getLanchonetesPageBody(BuildContext context) {
return ListView.builder(
  itemCount: _allLanchonetes.length,
  itemBuilder: _getItemUI,
);
}

Widget _getItemUI(BuildContext context, index) {
  return Column(children: <Widget>[
    Padding(
     padding: EdgeInsets.only(right: 20.0),
      child: Divider(
      color: Colors.black,
      indent: 80.0,
      height: 8.0,
    ),
  ),
  ListTile(
    contentPadding: EdgeInsets.fromLTRB(15.0, 10.0, 10.0, 10.0),
    leading: Container(
      width: 55.0,
      height: 60.0,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
            fit: BoxFit.cover,
            image: AssetImage(
            "images/" + _allLanchonetes[index].img)),
      ),
    ),
    title: Text(
      _allLanchonetes[index].name,
      style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
    ),
    onTap: () {
      _onLanchonetesButtonPressed(context);
    },
  )
  ]);
  }
}

void _onLanchonetesButtonPressed(BuildContext context) {
  Navigator.push(
  context, MaterialPageRoute(builder: (context) => ContactPage()));
}






class Lanchonetes {


  final String name;
  final String img;




  Lanchonetes({this.name, this.img});


  static List<Lanchonetes> allLanchonetes() {

   var listOfLanchonetes = List<Lanchonetes>();

   listOfLanchonetes.add(
    Lanchonetes(name: "Esquina do Açaí",
        img: "esquina_do_acai.jpg"));
   listOfLanchonetes.add(
    Lanchonetes(name: "Lanchonete Água na boca",
    img: "esquina_do_acai.jpg"));
   listOfLanchonetes.add(
    Lanchonetes(name: "Kídelicia", img: "esquina_do_acai.jpg"));
   listOfLanchonetes.add(
    Lanchonetes(name: "Godinho Lanches", img: "godinho.jpeg" ));
   return listOfLanchonetes;
  }
}


import 'package:flutter/material.dart';

class ContactPage extends StatelessWidget {
 @override
Widget build(BuildContext context) {
return SafeArea(
    child: Scaffold(
      backgroundColor: Colors.blueGrey[100],
        body: ListView(children: <Widget>[
          Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
                child: Stack(children: <Widget>[

                  Image.asset("images/esquina_do_acai.jpg"),
                  Container(
                    height: 420.0,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: FractionalOffset.center,
                          end: FractionalOffset.bottomCenter,
                          colors: [
                            Colors.grey.withOpacity(0.0),
                            Colors.black,
                          ])
                    ),
                  ),

                  Positioned(
                    bottom: 10.0,
                    left: 15.0,
                    child: Text(
                      "Esquina do Açaí",
                      style: TextStyle(
                          fontSize: 40.0, 
                          fontWeight: FontWeight.normal, 
                          color: Colors.white),
                    ),
                  )
                ]
                ),

              )
            ],
          ),
          Padding(
            padding: EdgeInsets.only(top: 5.0),
            child: GestureDetector(
              child: Card(
                elevation: 1.0,
                child: Container(
                  height: 100.0,
                  color: Colors.white,
                  child: Padding(
                    padding: EdgeInsets.symmetric(
                        vertical: 30.0, horizontal: 15.0),
                    child: Text(
                      "Cardápio",
                      style: TextStyle(
                          fontSize: 30.0, 
                          fontWeight: FontWeight.bold),
                    ),
                  ),

                ),
              ),
              onTap: () {},
            ),

          ),

          Card(
              elevation: 1.0,
              child: Container(
                  height: 100.0,
                  color: Colors.white,
                  child: Padding(
                    padding: EdgeInsets.symmetric(
                        vertical: 30.0, horizontal: 15.0),
                    child: Text(
                      "Pedir",
                      style: TextStyle(
                          fontSize: 30.0, fontWeight:
                          FontWeight.bold),
                    ),
                  )))
        ])));
  }
}

回答1:


In your Navigation function you can pass one object

on your onTap you should pass your object like this in navigation function

onTap: () {
      _onLanchonetesButtonPressed(context, _allLanchonetes[index]);
}

and receive it at function and pass it to new page

void _onLanchonetesButtonPressed(BuildContext context,Lanchonetes lanchonetes) {
      Navigator.push(
      context, MaterialPageRoute(builder: (context) => ContactPage(lanchonetes)));
    }

on new page create constructor 



 class ContactPage extends StatelessWidget {
        Lanchonetes lanchonetes;

        ContactPage({this.lanchonetes});

        //

        Your code 

        //

    }

with this you can use your lanchonetes object in new page



来源:https://stackoverflow.com/questions/55958561/how-to-navigate-to-another-page-but-show-information-according-to-the-items-on-m

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!