Flutter banner_view 轮播图的使用及实现代码

1、前言

实现轮播图，效果如下：

2、实现

将采用 banner_view 实现：资源库地址

2.1、yaml 引入依赖

在 pubspec.yaml 声明需要引用的库，执行命令 flutter packages get 进行拉取即可使用。

banner_view: "^1.1.2"

2.2、代码中引入依赖

在资源库地址下方，作者提供了 banner_view 的几种展示方式。

import 'package:flutter/material.dart';
import 'package:banner_view/banner_view.dart';
import 'Pair.dart';
import 'factory/BannerItemFactory.dart';
class BannerViewPage extends StatefulWidget {
 @override
 _BannerViewPageState createState() => new _BannerViewPageState();
}
class _BannerViewPageState extends State<BannerViewPage> {
 @override
 Widget build(BuildContext context) {
  return new Scaffold(
   body:
     new Container(
      child: new Column(
       children: <Widget>[
        new Container(
         alignment: Alignment.center,
         height: 200.0,
         child: this._bannerView0(),
         padding: EdgeInsets.only(bottom: 10.0),
        )
       ],
      ),
     ),
   );
 }
 /**
  * 第一种方式
  */
 BannerView _bannerView0() {
  // 盛放图片的 List
  List<Pair<String, Color>> param = [
   Pair.create('https://p5.ssl.qhimg.com/dm/456_209_/t01f43c5849ef5f521a.jpg', Colors.red[500]),
   Pair.create('https://p.ssl.qhimg.com/t0171bb61911ebe8899.jpg', Colors.green[500]),
   Pair.create('https://p.ssl.qhimg.com/t01ee77978d3a95a3ae.jpg', Colors.blue[500]),
  ];
  return new BannerView(
   BannerItemFactory.banners(param),
  );
//  return new BannerView(
//   BannerItemFactory.banners(param),
//   indicatorMargin: 10.0,
//   indicatorNormal: new Container(
//    width: 5.0,
//    height: 5.0,
//    decoration: new BoxDecoration(
//     color: Colors.green,
//     shape: BoxShape.rectangle,
//    ),
//   ),
//   indicatorSelected: new Container(
//    width: 15.0,
//    height: 5.0,
//    decoration: new BoxDecoration(
//     color: Colors.black,
//     shape: BoxShape.rectangle,
//     borderRadius: new BorderRadius.all(
//      new Radius.circular(5.0),
//     ),
//    ),
//   ),
//   indicatorBuilder: (context, indicator) {
//    Widget cc = new Container(
//     padding: new EdgeInsets.symmetric(horizontal: 20.0,),
//     height: 44.0,
//     width: double.infinity,
//     color: Colors.grey[300],
//     child: indicator,
//    );
//    return new Opacity(
//     opacity: 0.5,
//     child: cc,
//    );
//   },
//  );
 }
 /**
  * 第二种方式
  */
 BannerView _bannerView() {
  var pre = 'https://raw.githubusercontent.com/yangxiaoweihn/Assets/master';
  List<Pair<String, Color>> param = [
   Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/cars/car_0.jpg', Colors.red[100]),
   Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/cartoons/ct_0.jpg', Colors.green[100]),
   Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/pets/cat_1.jpg', Colors.blue[100]),
   Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/scenery/s_1.jpg', Colors.yellow[100]),
   Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/cartoons/ct_1.jpg', Colors.red[100]),
//   Pair.create('$pre/cartoons/ct_1.jpg', Colors.red[100]),
  ];
  return new BannerView(
   BannerItemFactory.banners(param),
   indicatorMargin: 10.0,
   indicatorNormal: new Container(
    width: 5.0,
    height: 5.0,
    decoration: new BoxDecoration(
     color: Colors.green,
     shape: BoxShape.rectangle,
    ),
   ),
   indicatorSelected: new Container(
    width: 15.0,
    height: 5.0,
    decoration: new BoxDecoration(
     color: Colors.black,
     shape: BoxShape.rectangle,
     borderRadius: new BorderRadius.all(
      new Radius.circular(5.0),
     ),
    ),
   ),
   indicatorBuilder: (context, indicator) {
    Widget cc = new Container(
     padding: new EdgeInsets.symmetric(horizontal: 20.0,),
     height: 44.0,
     width: double.infinity,
     color: Colors.grey[300],
     child: indicator,
    );
    return new Opacity(
     opacity: 0.5,
     child: cc,
    );
   },
  );
 }
}

总结

以上所述是小编给大家介绍的Flutter banner_view 轮播图的使用及实现代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！