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 轮播图的使用及实现代码,希望对大家有所帮助