到目前为止,我已经实现了这一点。我将此包用于滑块https://pub.dev/packages/carousel_slider/example
SafeArea(
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Color(0xFFFFE97D),
child: Padding(
padding: EdgeInsets.only(top: 20.0),
child: Stack(
children: <Widget>[
Container(
width: 200,
height: 100,
color: Color(0xFFC90303),
child: Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: Text(
"APPLY NOW",
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
),
),
Positioned(
top: 50,
left: 30,
width: 100,
height: 100,
child: CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 1.0,
enlargeCenterPage: true,
),
items: imageSliders,
),
),
],
),
),
),
),
),
这是imageSliders。
final List<Widget> imageSliders = imgList
.map((item) => Container(
child: Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Stack(
children: <Widget>[
Image.network(item, fit: BoxFit.cover, width: 1000.0),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(200, 0, 0, 0),
Color.fromARGB(0, 0, 0, 0)
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
padding: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 20.0),
child: Text(
'No. ${imgList.indexOf(item)} image',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
)),
),
))
.toList();
但是我得到的是图像包含在一个空间中,如何使它们散开?就像上面的图片。