Hi Guys, Today we are going to learn how to show Carousel Banners in Flutter Table of contents Integrated flutter_swiper Add flutter_swiper: ^ 1.1.6 and synchronize flutter packages get. flutter_swiper: ^1.1.6 Add Swiper to widget You can set the scrolling direction to Axis.vertical if you need to scroll vertically. Multiple layout methods, unlimited carousel, Android and IOS dual-end adaptation Swiper( Properties Page indicator Inherited from the paging indicator SwiperPlugin, SwiperPluginto Swiperprovide an additional interface. Set to new SwiperPagination()show the default tab Control button Control button component is inherited from SwiperPlugin, is set new SwiperControl()to show the default controls Full code Flutter run
1. Integrated flutter_swiper
2. Add Swiper3. Properties
4. Page indicator
5. Control button
6. Full code
7. Flutter run
Add references import 'package: flutter_swiper / flutter_swiper.dart' in the corresponding .dart files
outer: false,
itemBuilder: (c, i) {
if(dataList!=null){
return Container(
child: Image.asset(dataList[i].img,fit: BoxFit.cover,),
);
}
},
pagination:
new SwiperPagination(margin: new EdgeInsets.all(5.0)),
itemCount: dataList == null ? 0 : dataList.length,
)
Parameter
Defaults
Description
scrollDirection
Axis.horizontal
Scroll direction, set to Axis.vertical if you need to scroll vertically
loop
true
Unlimited carousel mode switch
index
0
Index position at the beginning
autoplay
false
Auto play switch
onIndexChanged
void onIndexChanged(int index)
Invoked when the user changes the index by manual dragging or autoplay
onTap
void onTap(int index)
Called when the user clicks on a carousel
duration
300.0
Animation time in milliseconds
pagination
null
Setting
new SwiperPagination()Display default paging indicator
control
null
Setting
new SwiperControl()Display default paging buttons
Parameter
Defaults
Description
alignment
Alignment.bottomCenter
If you want to put the paging indicator in another position, you can modify this parameter
margin
const EdgeInsets.all(10.0)
Distance between page indicator and container border
builder
SwiperPagination.dots
Now defines two default paging indicator style:
SwiperPagination.dots, , SwiperPagination.fractioncan be further customized
Parameter
Defaults
Description
iconPrevious
Icons.arrow_back_ios
IconData on the previous page
iconNext
Icons.arrow_forward_ios
IconData on the next page
color
Theme.of(context).primaryColor
Control button color
size
30.0
Control button size
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'cource_data.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Carasole(),
);
}
}
class Carasole extends StatelessWidget{
ListdataList=CourceData.getList();
ListdataBanners=CourceData.getBanners();
SwiperController _swiperController=SwiperController();
@override
Widget build(BuildContext context) {
// TODO: implement build
return SafeArea(
child: Scaffold(
backgroundColor: Color.fromARGB(0, 1, 221, 245),
body: Column(
children: [
Card(
elevation: 10,margin: EdgeInsets.all(5),
shape: RoundedRectangleBorder
(borderRadius: BorderRadius.circular(10.0)),
child: Container(
height: 180,
child: Swiper(
itemWidth: 250,
controller: _swiperController,
outer: false,
itemBuilder: (c, i) {
if(dataBanners!=null){
return Container(
child: Image.asset(dataBanners[i].img,fit: BoxFit.cover,
height: 120,),
);
}
},
pagination:
new SwiperPagination(builder: DotSwiperPaginationBuilder(
activeColor: Colors.pink,size: 5,activeSize: 8,
color: Colors.grey),
margin: new EdgeInsets.all(5.0)),
itemCount: dataBanners == null ? 0 : dataBanners.length,
layout: SwiperLayout.STACK,
),
),
),
Expanded(
child: ListView.builder(
itemCount: dataList.length,
itemBuilder: (ctx,index){
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListTile(
title: Text(dataList[index].name),
subtitle: Text("By Author"),
leading:Image.asset(dataList[index].img)
),
),
);
}),
)
],
),
),
);
}
}
