[shutter] banner carousel component (shutter_wiper plug-in | swiper component)

One 、flutter_swiper plug-in unit

---

To https://pub.dev/packages Search for flutter_swiper Components https://pub.dev/packages/flutter_swiper ;

install flutter_swiper plug-in unit :

① To configure Flutter plug-in unit : stay pubspec.yaml Configuration in profile Flutter plug-in unit :

dependencies:  flutter_swiper: ^1.1.6

② obtain Flutter plug-in unit : Click on the " Pub get " Button , Get plug-ins , Automatically from https://pub.dev/packages The platform downloads the plug-in and configures it to Flutter In the project ;

③ Introduce in the project : In need of use Banner Carousel plug in flutter_swiper Import the dart package ;

import 'package:flutter_swiper/flutter_swiper.dart';

Two 、Swiper Components use

---

install flutter_swiper After plug-in package , stay dart Import the plug-in package from the source code ,

import 'package:flutter_swiper/flutter_swiper.dart';

In the corresponding dart Use... In the document Swiper Components ;

Main setup Swiper The following four parameters :

① int itemCount : Number of carousels , There are a few pictures in the rotation status ;

② bool autoplay : Whether to automatically rotate pictures ;

③ IndexedWidgetBuilder itemBuilder : Set the rotation component , Be careful IndexedWidgetBuilder Type is a method , This method returns Widget Components ;

typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);

④ SwiperPlugin pagination : Rotation indicator , Dot under the rotation component ;

Code example :

Swiper(  ///  Number of carousels   itemCount: _imageUrls.length,  ///  Set the rotation chart to play automatically   autoplay: true,  ///  Carousel entry component   itemBuilder: (BuildContext context, int index) { 
        return Image.network(      ///  picture  URL  link       _imageUrls[index],      ///  Zoom mode       fit: BoxFit.fill,    );  },  ///  Carousel indicator   pagination: SwiperPagination(),),

3、 ... and 、 Complete code example

---

Complete code example :

import 'package:flutter/material.dart';import 'package:flutter_swiper/flutter_swiper.dart';///  Application main interface class HomePage extends StatefulWidget { 
      @override  _HomePageState createState() => _HomePageState();}class _HomePageState extends State<HomePage> { 
      List _imageUrls = [    "https://img-blog.csdnimg.cn/20210401205234582.png",    "https://img-blog.csdnimg.cn/20210401205307863.png",    "https://img-blog.csdnimg.cn/20210401205249606.png"  ];  @override  Widget build(BuildContext context) { 
        ///  Interface framework     return Scaffold(      ///  Centering component       body: Center(        child: Column(          children: [            Container(              ///  Set up  Banner  Shuffling figure  160  Pixels               height: 200,              ///  This is a  flutter_swiper  Rotation diagram of plug-in               child: Swiper(                ///  Number of carousels                 itemCount: _imageUrls.length,                ///  Set the rotation chart to play automatically                 autoplay: true,                ///  Carousel entry component                 itemBuilder: (BuildContext context, int index) { 
                      return Image.network(                    ///  picture  URL  link                     _imageUrls[index],                    ///  Zoom mode                     fit: BoxFit.fill,                  );                },                ///  Carousel indicator                 pagination: SwiperPagination(),                              ),            ),          ],        ),      ),    );  }}

Running effect :

Four 、 Related resources

---

Reference material :

• Flutter Official website : https://flutter.dev/
• Flutter Plug in download address : https://pub.dev/packages
• Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
• official GitHub Address : https://github.com/flutter
• Flutter The Chinese community : https://flutter.cn/
• Flutter Practical tutorial : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart Chinese document : https://dart.cn/
• Dart Developer website : https://api.dart.dev/
• Flutter Chinese net : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )
• GitHub Upper Flutter Open source examples : https://download.csdn.net/download/han1202012/15989510
• Flutter Practical e-books : https://book.flutterchina.club/chapter1/

Important topics :

• Flutter Animation reference documentation : https://flutterchina.club/animations/

Blog source download :

• GitHub Address : https://github.com/han1202012/flutter_app ( Keep updating with the progress of the blog , There may not be the source code of this blog )

• Blog source snapshot : https://download.csdn.net/download/han1202012/16311756 ( The source code snapshot of this blog , You can find the source code of this blog )