how to add these images in carousal in flutter
CodePudding user response：
Use this carousel_slider 4.0.0 package from pubdev.
Installation
Add carousel_slider: ^4.0.0 to your pubspec.yaml dependencies. And import it:
import 'package:carousel_slider/carousel_slider.dart';
How to use Simply create a CarouselSlider widget, and pass the required params:
CarouselSlider(
options: CarouselOptions(height: 400.0),
items: [1,2,3,4,5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.amber
),
child: Text('text $i', style: TextStyle(fontSize: 16.0),)
);
},
);
}).toList(),
)
CodePudding user response：
https://pub.dev/packages/smooth_page_indicator you can use this for dot animation along with https://pub.dev/packages/carousel_slider here is a little example please adjust size accordingly
class Carosel extends StatelessWidget {
List<listScreen> introduction = [
listScreen(image: 'assets/Reading_Plans.png'),
listScreen(image: 'assets/Reading_Plans.png'),
listScreen(image: 'assets/Reading_Plans.png'),
listScreen(image: 'assets/Reading_Plans.png'),
];
set index(value) => _index.value = value;
get index => _index.value;
final _index = 0.obs;
final CarouselController _controller = CarouselController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
width: MediaQuery.of(context).size.width / 1.5,
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height / 2,
child: CarouselSlider(
carouselController: _controller,
options: CarouselOptions(
enableInfiniteScroll: false,
viewportFraction: 1,
height: MediaQuery.of(context).size.height / 3,
aspectRatio: 1.0,
onPageChanged: (ind, reason) {
index = ind;
}),
items: introduction
.map((listScreen item) => Column(
children: [
SizedBox(
height: kToolbarHeight / 2,
),
Container(
child: Image(
image: AssetImage(item.image),
),
),
SizedBox(
height: 20,
),
// Spacer(),
],
))
.toList(),
),
),
Spacer(),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 35.0,
vertical: 15,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Obx(() {
return index != 3
? Container(
width: 90,
child: AnimatedSmoothIndicator(
activeIndex: index,
count: 4,
effect: ExpandingDotsEffect(
dotHeight: 13,
dotWidth: 13,
activeDotColor: Color(0xff5C5C78),
),
),
: Container();
}),
],
),
),
Spacer(),
],
),
),
),
);
}
}
CodePudding user response：
The other answers are correct and fully functional. You can use
carousel_slider: ^4.0.0
or simply follow the following link to get a complete understanding of code.