【发布时间】：2022-09-23 23:26:28
【问题描述】：
如何使用图像列表和名称为颤振网络创建颤振轮播卡片小部件，如图所示？在默认视图中必须是 3 张卡
[请点击链接查看图片][1]
卡片
标签： flutter flutter-layout flutter-web flutter-card
【发布时间】：2022-09-23 23:26:28
【问题描述】：
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(),
],
),
),
),
【讨论】：