Create horizontal scrollable cardviews using ListView

In this tutorial I’m going to create a horizontal scrollable CardView by using ListView. Inside this cardview, I am going to set an image and Textview. And the data inside this cardview will be fetch from the list.

To create a dynamic list we are going to use ListView.builder and to show your data inside a card, i will use Column. itemCount will build productData.length number of cards.

@override
 Widget build(BuildContext context) {
     return MaterialApp(
         debugShowCheckedModeBanner: false,
         home: new Scaffold(
             body: new SingleChildScrollView(
                 child: Column( 
                     mainAxisSize: MainAxisSize.min,    
                     children: <Widget>[

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.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: 200.0,
height: 200.0,
child: Image.asset('assets/apple.png', scale: 0.7),
),


Text("A for Apple", style: TextStyle(fontSize: 25.0, fontFamily: 'Comic', fontWeight: FontWeight.bold),),

],
),

), ), ) )

], ), ), ) ); }