Flutter carousel
1 Add dependency library
flutter_swiper: ^1.0.6
- 1
2 Commonly used dot indicator automatic carousel
class SwiperViewDefaultPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new SwiperViewDefaultPageState();
}
}
class SwiperViewDefaultPageState
extends BaseAppBarPageState<SwiperViewDefaultPage> {
@override
String buildInitState() {
buildBackBar("轮播图", backIcon: Icons.arrow_back_ios);
return null;
}
@override
Widget buildWidget(BuildContext context) {
print("build --");
return new Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
),
buildStyle1(),
],
);
}
// Paging indicator
buildSwiperPagination ( ) {
return SwiperPagination (
//The position of the indicator display
alignment : Alignment . bottomCenter , // position Alignment. bottomCenter bottom middle
// distance adjustment
margin : const EdgeInsets . fromLTRB ( 0 , 0 , 0 , 5 ) ,
// indicator build
builder : DotSwiperPaginationBuilder (
// space between dots
space : 2 ,
// size when unchecked
size : 6 ,
// size when selected
activeSize : 12 ,
// color when not selected
color : Colors . black54 ,
// color when selected
activeColor : Colors . white ) ,
) ;
}
//banner
Widget buildStyle1 ( ) {
return Container (
height : 200.0 ,
child : new Swiper (
// horizontal
scrollDirection : Axis . horizontal ,
// Layout build
itemBuilder : ( BuildContext context , int index ) {
return new Image . network (
"http://hbimg.b0.upaiyun.com/a3e592c653ea46adfe1809e35cd7bc58508a6cb94307-aaO54C_fw658",
fit : BoxFit . fill ,
) ;
} ,
// number of items
itemCount : 6 ,
// automatic page turning
autoplay : true ,
// pagination indication
pagination : buildPlugin ( ) ,
// click event
onTap : ( index ) {
print ( "click" + index . toString ( ) ) ;
} ,
// adjacent subitem window scale
viewportFraction : 1 ,
// Layout method
//layout: SwiperLayout.STACK,
// Stop automatic page turning when the user is operating
autoplayDisableOnInteraction : true ,
// Wireless carousel
loop : true ,
// The scaling ratio of the current item
scale : 1 ,
) ,
) ;
}
buildPlugin() {
return SwiperPagination();
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
3 Custom dot paging indicator effect
//Custom dot paging indicator
buildSwiperPagination() {
// pagination indicator
return SwiperPagination(
//The position of the indicator to display
alignment: Alignment.bottomCenter, // position Alignment.bottomCenter bottom middle
// distance adjustment
margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),
// indicator construction
builder: DotSwiperPaginationBuilder(
// interval between points
space: 2,
// size when unchecked
size: 6,
// size when selected
activeSize: 12,
// color when not selected
color: Colors.black54,
// color when selected
activeColor: Colors.white),
);
}
//Define the carousel component
Widget buildStyle1() {
return Container(
height: 200.0,
child: new Swiper(
// horizontal
scrollDirection: Axis.horizontal,
// layout construction
itemBuilder: (BuildContext context, int index) {
return new Image.network(
"http://hbimg.b0.upaiyun.com/a3e592c653ea46adfe1809e35cd7bc58508a6cb94307-aaO54C_fw658",
fit: BoxFit.fill,
);
},
// number of entries
itemCount: 6,
// Automatically turn pages
autoplay: true,
// paging instructions
pagination: buildSwiperPagination(),
//click event
onTap: (index) {
print("Click" + index.toString());
},
// viewport scale
viewportFraction: 1,
// layout method
//layout: SwiperLayout.STACK,
// Stop automatic page turning when the user performs an operation
autoplayDisableOnInteraction: true,
// wireless carousel
loop: true,
scale: 1,
),
);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
4 Custom digital pagination indicator effect
//Custom paging indicator
buildSwiperPagination ( ) {
// Paging indicator
return SwiperPagination (
//The position of the indicator display
alignment : Alignment . bottomCenter , // position Alignment.bottomCenter bottom middle
// distance adjustment
margin : const EdgeInsets . fromLTRB ( 0 , 0 , 0 , 5 ) ,
// indicator build
builder : FractionPaginationBuilder (
// font size when selected
activeFontSize : 14,
// font size
fontSize : 14 ,
// font color
color : Colors . red ,
// color
activeColor : Colors . blue ) ,
) ;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
This official account will publish a series of special articles for the first time, and paid video courses will be published in the official account for free. On your way to get off work or just before going to bed, this official account is a small choice for you to browse knowledge dry goods. Act, at that moment, the official account will prompt you to learn.
