swiper.dart

swiper.dart

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_page_indicator/flutter_page_indicator.dart';

class SwiperPage extends StatefulWidget {
  @override
  SwiperPageState createState() {
    return SwiperPageState();
  }
}

class MySwiperPaginationBuilder extends SwiperPlugin {
  ///color when current index,if set null , will be Theme.of(context).primaryColor
  final Color activeColor;

  ///,if set null , will be Theme.of(context).scaffoldBackgroundColor
  final Color color;

  ///Size of the dot when activate
  final double activeSize;

  ///Size of the dot
  final double size;

  /// Space between dots
  final double space;

  final Key key;

  const MySwiperPaginationBuilder(
      {this.activeColor,
      this.color,
      this.key,
      this.size: 10.0,
      this.activeSize: 10.0,
      this.space: 3.0});

  @override
  Widget build(BuildContext context, SwiperPluginConfig config) {
    if (config.itemCount > 20) {
      print(
          "The itemCount is too big, we suggest use FractionPaginationBuilder instead of DotSwiperPaginationBuilder in this sitituation");
    }
    Color activeColor = this.activeColor;
    Color color = this.color;

    if (activeColor == null || color == null) {
      ThemeData themeData = Theme.of(context);
      activeColor = this.activeColor ?? themeData.primaryColor;
      color = this.color ?? themeData.scaffoldBackgroundColor;
    }

    if (config.indicatorLayout != PageIndicatorLayout.NONE &&
        config.layout == SwiperLayout.DEFAULT) {
      return new PageIndicator(
        count: config.itemCount,
        controller: config.pageController,
        layout: config.indicatorLayout,
        size: size,
        activeColor: activeColor,
        color: color,
        space: space,
      );
    }

    List<Widget> list = [];

    int itemCount = config.itemCount;
    int activeIndex = config.activeIndex;

    for (int i = 0; i < itemCount; ++i) {
      bool active = i == activeIndex;
      list.add(Container(
        key: Key("pagination_$i"),
        margin: EdgeInsets.all(space),
        child: !active
            ? ClipOval(
                child: Container(
                  color: active ? activeColor : color,
                  width: active ? activeSize : size,
                  height: active ? activeSize : size,
                ),
              )
            : ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Container(
                  color: active ? activeColor : color,
                  width: 10,
                  height: active ? activeSize : size,
                ),
              ),
      ));
    }

    if (config.scrollDirection == Axis.vertical) {
      return new Column(
        key: key,
        mainAxisSize: MainAxisSize.min,
        children: list,
      );
    } else {
      return new Row(
        key: key,
        mainAxisSize: MainAxisSize.min,
        children: list,
      );
    }
  }
}

class SwiperPageState extends State<SwiperPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text('轮播组件'),
      // ),
      body: Stack(
          // width: MediaQuery.of(context).size.width,
          children: [
            Container(
              height: 500,
              child: Container(
                height: 150,
                child: Swiper(
                  itemBuilder: _swiperBuilder,
                  itemCount: 7,
                  pagination: new SwiperPagination(
                      margin: new EdgeInsets.all(0.0),
                      builder: new SwiperCustomPagination(builder:
                          (BuildContext context, SwiperPluginConfig config) {
                        return new ConstrainedBox(
                          child: new Row(
                            children: <Widget>[
                              new Expanded(
                                child: new Align(
                                  alignment: Alignment.bottomCenter,
                                  child: new MySwiperPaginationBuilder(
                                          color: Colors.black38,
                                          activeColor: Colors.black,
                                          size: 6.0,
                                          activeSize: 6.0)
                                      .build(context, config),
                                ),
                              )
                            ],
                          ),
                          constraints: new BoxConstraints.expand(height: 50.0),
                        );
                      })),
                  // control: new SwiperControl(),
                  scrollDirection: Axis.horizontal,
                  autoplay: true,
                  onTap: (index) => print('点击了第$index个'),
                ),
              ),
            ),
            new Positioned(
             left: 35.0,
             right: 35.0,
             top: 45.0,
             child: new Text(
               'Whatever is worth doing is worth doing well. ๑•ิ.•ั๑',
               style: new TextStyle(
                 fontSize: 20.0,
                 fontFamily: 'serif',
               ),
             ),
           ),
          ]),
    );
  }

  Widget _swiperBuilder(BuildContext context, int index) {
    return (Image.network(
      "http://via.placeholder.com/350x150",
      fit: BoxFit.fill,
    ));
  }
}