简体   繁体   中英

How to replace list of image by list of widget in flutter?

Hello I tried to use this tinder card plugin, but the exemple use list string to display asset for each new card, but I search to modify the container with more content like text, image etc

here is the example :

 List<String> welcomeImages = [
    "assets/welcome0.png",
    "assets/welcome1.png",
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
          child: Container(
              height: MediaQuery.of(context).size.height * 0.6,
              child: new TinderSwapCard(
             ...
                cardBuilder: (context, index) => Card(
                      child: Image.asset('${welcomeImages[index]}'),
                    ),
              ))),
    );

I search something like this :

  List<widget> my_list_of_widget= [
        widget1()
        widget2()
      ];

    widget1(){
    return column[
     text 
     image
     etc 
    ]
   }

   widget2(){
   return column[
    text 
    image
    etc 
    ]
  }

      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          body: new Center(
              child: Container(
                  height: MediaQuery.of(context).size.height * 0.6,
                  child: new TinderSwapCard(
               ...
                    cardBuilder: (context, index) => Card(
                          child: my_list_of_widget
                        ),
                  ))),
        );

I have found this other tinder card plugin but same example problem :

new Swiper(
    itemBuilder: (BuildContext context, int index) {
      return new Image.network(
        "http://via.placeholder.com/288x188",
        fit: BoxFit.fill,
      );
    },
    itemCount: 2,
    itemWidth: 300.0,
    itemHeight: 400.0,
    layout: SwiperLayout.TINDER,
 )

I need something like this :

new Swiper(
        itemBuilder: (BuildContext context, int index) {
          return children[
          widget 1()  //index1
          widget 2()  //index2
         ]
        },
        itemCount: 2,
        itemWidth: 300.0,
        itemHeight: 400.0,
        layout: SwiperLayout.TINDER,
     )

I succeded to use this example of swiper plugin but I can't use layout: SwiperLayout.TINDER, if a use children: []

 new Swiper.children(
              viewportFraction: 0.7,
              scale: 0.7,
              autoplay: false,
              loop: true,

              control: new SwiperControl(

                  size: 25.0,
                  color: Colors.pink,
                  padding: const EdgeInsets.all(5.0)),
              pagination: new SwiperPagination(
                  margin: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
                  builder: new DotSwiperPaginationBuilder(
                      color: Color(0xff7589a2),
                      activeColor: Colors.pink,
                      size: 4.0,
                      activeSize: 8.0)),

              children: <Widget>[

 Text("blablabla1");

 Text("blablabla2");

     ],
   ),
 ),
)

)

Try this:

  List<Widget> welcomeWidgets =
      List<Widget>.from(welcomeImages.map((String asset) {
    return Column(
      children: <Widget>[Text(asset), Image.asset(asset)],
    );
  }));

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM