Flutter 轮播图怎么用？ Slider

image.png

这个轮播组件 有点 有参考意义 贴出来 玩玩

installation 安装

在你的 pubspec.yaml 中添加 carousel_slider: ^0.0.7

carousel_slider: ^0.0.7

Used 使用

First:import package in your widget

import 'package:carousel_slider/carousel_slider.dart';

Seconed:

你可能需要一个容器将他放进去，比如 一个Center、Container或者 其他。

new CarouselSlider(
  items: [1,2,3,4,5].map((i) {
    return new Builder(
      builder: (BuildContext context) {
        return new Container(
          width: MediaQuery.of(context).size.width,
          margin: new EdgeInsets.symmetric(horizontal: 5.0),
          decoration: new BoxDecoration(
            color: Colors.amber
          ),
          child: new Text('text $i', style: new TextStyle(fontSize: 16.0),)
        );
      },
    );
  }).toList(),
  height: 400.0,
  autoPlay: true
)

简单调用Demo

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Page2"),
      ),
      body: new CarouselSlider(
          items: [1,2,3,4,5].map((i) {
            return new Builder(
              builder: (BuildContext context) {
                return new Container(
                    width: MediaQuery.of(context).size.width,
                    margin: new EdgeInsets.symmetric(horizontal: 5.0),
                    decoration: new BoxDecoration(
                        color: Colors.amber
                    ),
                    child: new Image.network(
                      'http://i2.yeyou.itc.cn/2014/huoying/hd_20140925/hyimage06.jpg',
                      fit: BoxFit.fill,
                    )
                );
              },
            );
          }).toList(),
          height: 180.0,
          autoPlay: true
      )
    );
  }
}

点击看源码 GitHub CarouselSlider