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.
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')
],
),
),
),
)
);
}
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.