How to create flutter carousel card widget for flutter web as shown in this image using list of images and name? must be 3 card in default view
[Click link to see the image please][1]
card
[1]: https://i.stack.imgur.com/BjJfY.png**strong text**
1 Answers
body: Center(
child: SingleChildScrollView(
child: Column(
children: [
Text(
'Who will be the next PM of india in 2022?',
style: TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.w300,
),
),
SizedBox(
height: 450,
child: GridView.builder(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
itemCount: 6,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
// childAspectRatio: 0.689,
childAspectRatio: 0.489,
crossAxisSpacing: 5,
mainAxisSpacing: 15,
crossAxisCount:
(MediaQuery.of(context).size.width ~/ 250).toInt()
// crossAxisCount: 3
),
itemBuilder: (_, index) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
// background image and bottom contents
Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
children: <Widget>[
Container(
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.fill,
image: new AssetImage(
assets_cover[index],
)
// image: new AssetImage(
// 'images/congress.png')
)),
height: 200.0,
),
Expanded(
child: Container(
color: Colors.white,
child: Center(
// child: Text('Content goes here'),
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Text(
title[index],
style: TextStyle(
color: Colors.black,
fontSize: 20),
),
SizedBox(
height: 5,
),
ElevatedButton(
onPressed: () {
_signUpBox(context);
},
style: ElevatedButton.styleFrom(
elevation: 12.0,
textStyle: const TextStyle(
color: Colors.white)),
child: const Text('VOTE'),
),
Divider(
color: Colors.grey,
),
Container(
alignment: Alignment.topCenter,
margin: EdgeInsets.all(20),
child: LinearProgressIndicator(
minHeight: 15,
value: 0.59,
valueColor:
new AlwaysStoppedAnimation<
Color>(
Colors
.green.shade400),
backgroundColor: Colors.grey,
)),
Text(
'59%',
style: TextStyle(
color: Colors.blue,
fontSize: 25),
),
],
),
),
),
)
],
),
),
// Profile image
Positioned(
top:
150.0, // (background container size) - (circle height / 2)
child: Container(
height: 100.0,
width: 100.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
// image: new AssetImage('images/gandhi.jpeg'),
image: new AssetImage(
assets[index],
))),
),
)
],
);
},
)),
BottomBar(),
],
),
),
),
Related