參考外掛carousel_slider
https://pub.flutter-io.cn/packages/carousel_slider/example
得到的結果:
import 'package:carousel_slider/carousel_options.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Container(
child: CarouselSlider(
options: CarouselOptions(
autoPlay: true,
enlargeCenterPage: true,
autoPlayCurve: Curves.easeInOut,
aspectRatio: 16 / 9,
viewportFraction: 0.75,
),
items: [
"https://firebasestorage.googleapis.com/v0/b/san-67ce2.appspot.com/o/clothes.jpeg?alt=media&token=d3be6bcb-4a40-4c78-a577-0b4f6a386536",
"https://firebasestorage.googleapis.com/v0/b/san-67ce2.appspot.com/o/clothes.jpeg?alt=media&token=d3be6bcb-4a40-4c78-a577-0b4f6a386536",
"https://firebasestorage.googleapis.com/v0/b/san-67ce2.appspot.com/o/clothes.jpeg?alt=media&token=d3be6bcb-4a40-4c78-a577-0b4f6a386536",
"https://firebasestorage.googleapis.com/v0/b/san-67ce2.appspot.com/o/clothes.jpeg?alt=media&token=d3be6bcb-4a40-4c78-a577-0b4f6a386536",
"https://firebasestorage.googleapis.com/v0/b/san-67ce2.appspot.com/o/clothes.jpeg?alt=media&token=d3be6bcb-4a40-4c78-a577-0b4f6a386536",
].map((i) {
return Builder(
builder: (BuildContext context) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.black)),
child: Image.network(
i,
fit: BoxFit.fill,
alignment: Alignment.center,
)),
);
},
);
}).toList(),
),
),
);
}
}