Flutter 如何使用数据列表创建水平可滚动卡片视图

Question

I'm creating a horizontal scrollable cardviews. Inside the cardview, I want to set the image and textview.The data inside cardview will be fetch from the list.Now how to set the list data inside the cardview

 @override
 Widget build(BuildContext context) {
     return MaterialApp(
         debugShowCheckedModeBanner: false,
         home: new Scaffold(
             body: new SingleChildScrollView(
                 child: Column( 
                     mainAxisSize: MainAxisSize.min,    
                     children: <Widget>[   
                         buildBody(),
                         productsCard()   
                         ],
                     ),
                 ),
             )
         );
     }
    Widget buildBody() {
        return Stack(
            // alignment: Alignment.bottomCenter,
            children: <Widget> [
                new Image(
                    image: new AssetImage('assets/homebg.png'),
                    ), 

               Positioned(
                   left: 50.0,
                   right: 50.0,
                   bottom: 40.0, 
                   height: 64.0,// adjust this if you want some padding
                   child: RaisedGradientButton(
                       onPressed: () {
                           Navigator.push(
                               context, MaterialPageRoute(builder: (context) => StylistPage()));
                        },
                        child: new Text("BOOK AN APPOINTMENT", 
                            style: TextStyle(fontSize: 20.0, color: Colors.white),

                         ),
                        gradient: LinearGradient(
                            colors: <Color>[const Color(0xFF000000),const Color(0xFF000000), const Color(0xFF40079B)],
                        ),
                    ), // child widget
                ),
               ]
            );
    }

    Widget productsCard(){
        return Container(
            child: ListView(     
                scrollDirection: Axis.horizontal, // <-- Like so
                children: <Widget>[
                    Container(
                        width: 160.0,
                        color: Colors.red,
                     ),

                     Container(
                         width: 160.0,
                         color: Colors.blue,
                      ),

                     Container(
                         width: 160.0,
                         color: Colors.green,
                      ),

                  ],
            )
        );
    }

// Here is my list of data.I have four values in each item of the list.

 List<ProductsCollection> productData = []
 ..add(ProductsCollection('Discipline curl','https://sgdfgdgd/jdkjdhj.png/jashdghd',20,'akhsgdahghsgdh'))
 ..add(ProductsCollection('Discipline curl','https://sgdfgdgd/jdkjdhj.png/jashdghd',20,'akhsgdahghsgdh'))
 ..add(ProductsCollection('Discipline curl','https://sgdfgdgd/jdkjdhj.png/jashdghd',20,'akhsgdahghsgdh'));

When I try to call the productsCard method, I'm not able to see any widgets in my screen.The screen appears blank after the code and also the number of cars should depends upon the number of values available in the list.

Answer 1

Your list isn't showing because you haven't given any height to it. Add height to the Container wrapping the ListView.

To create a dynamic list you can use ListView.builder and to show your data inside a card, Column will help you. itemCount will build productData.length number of cards.

    Widget productsCard(){
    return Container(
      height: 200.0,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: productData.length,
          itemBuilder: (BuildContext context, int i) =>
              Card(
                child: Container(
                  width: 160.0,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Text('Discipline curl'),
                      Text('https://sgdfgdgd/jdkjdhj.png/jashdghd'),
                      Text('20'),
                      Text('akhsgdahghsgdh')
                    ],
                  ),
                ),
              ),
        )
    );
  }