如何在 Flutter 中使用 GestureDetector 和 SliverList 进行导航

Question

How can I navigate using my list?
My list

class myHome extends StatelessWidget {
 List<paralies> beaches = [
 paralies(title: "Afandou Beach", photos: "rv_afandou_a.jpg", intent: "b_afandou"),
 paralies(title: "Agathi Beach", photos: "b_afandou_b.jpg", intent: "b_agathi")
];

paralies.dart

 class paralies {
  String title; // Name
  String photos; // Photos
  String intent; // Pages

  paralies({ this.title,this.photos,this.intent});



  }

My onTap

SliverList(
          delegate: SliverChildBuilderDelegate(
                (context, index) => GestureDetector(onTap:(){
                  Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){return beaches[index].intent;})
                  ); //Material
                }, //onTap

Full Code:

class myHome extends StatelessWidget {
 List<paralies> beaches = [
 paralies(title: "Afandou Beach", photos: "rv_afandou_a.jpg", intent: "b_afandou"),
 paralies(title: "Agathi Beach", photos: "b_afandou_b.jpg", intent: "b_agathi")
];


@override
Widget build(BuildContext context) {
return SafeArea(
  child: Material(
    child: CustomScrollView(
      slivers: [
        SliverPersistentHeader(
          delegate: MySliverAppBar(expandedHeight: 200),
          pinned: true,
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
                (context, index) => GestureDetector(onTap:(){
                  Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){return beaches[index].intent;})
                  ); //Material
                }, //onTap


                    child: Card(
                   child: Padding(

                    padding: const EdgeInsets.fromLTRB(15.0,0,15.0,0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[

                       Image.asset("assets/beaches/${beaches[index].photos}", width: 100.0,height: 
                                  100.0,),
                        SizedBox(width: 70.0),
                        Text(beaches[index].title,
                        style: TextStyle(
                          color: Colors.blue,
                          fontWeight: FontWeight.w800,
                          fontSize: 20,
                      ), //TextStyle
                     ), //Text
                    ], //<Widget>[]
                   ), //Row
                  ), //Padding
                 ), //Card
                ), //GestureDetector

            childCount: beaches.length,

           ), //SliverChildBuilderDelegate
          ), //SliverList
        ], //Slivers
      ), //Custom ScrollView

    ), //Material
  ); //Safe Area
 } //build
} //MyHome

Answer 1

SliverList( delegate: SliverChildBuilderDelegate( (context, index) => GestureDetector(onTap:(){ Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){return beaches[index].intent;}) ); //Material }, /

From what I understand you are attempting to navigate using the specific index of the list, what you should do is something like this:

Widget _intentToPage(String intent){
  if(intent == "b_afandou"){
    return B_AFANDOU_PAGE();
  }
  else if(intent == ...){
    ...
  }
  return Text("Page not found");
}


SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) => GestureDetector(onTap:(){
      Navigator.push(context, MaterialPageRoute(builder: (context) => _intentToPage(beaches[index].intent));
    }, 

With B_AFANDOU_PAGE() being the ctor of the specific page for that intent.

Note: Code is not tested but I believe this approach should give you a basic idea to solve this.

Answer 2

I just used an if

SliverList(
              delegate: SliverChildBuilderDelegate(
                    (context, index) => GestureDetector(


                  child: Card(
                    child: Padding(

                      padding: const EdgeInsets.fromLTRB(15.0,0,15.0,0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[

                          Image.asset("assets/beaches/${beaches[index].photos}", width: 100.0,height:
                          100.0,),
                          SizedBox(width: 70.0),
                          Text(beaches[index].title,
                            style: TextStyle(
                              color: Colors.blue,
                              fontWeight: FontWeight.w800,
                              fontSize: 20,
                            ), //TextStyle
                          ), //Text
                        ],
                      )
                    ),
                  ),
                      onTap:() {if (index==0)
                    Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){return b_afandou();})
                    );

                    if (index==1)
                    Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){return b_agathi();})
                    );
                    }
                ),