Flutter carousel

1 Add dependency library

flutter_swiper: ^1.0.6
  • 1

2 Commonly used dot indicator automatic carousel

insert image description here


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

insert image description here

  //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

insert image description here

  //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.
insert image description here


Related: Flutter carousel