Achieve PageView indicator with Flutter

Benpian with an instance of PageView to deepen the impression, and after the column, we will deepen this example, made a sliding up and down the image of the Banner unlimited support, and teach you how to make him Dart library and open to other people.

I. unlimited sliding PageView

Before implementing PageView indicator, we need to implement a PageView. Achieve a PageView in Flutter is very simple.

class BannerGalleryWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return BannerGalleryWidgetState();
  }
}

class BannerGalleryWidgetState extends State<BannerGalleryWidget> {
  final PageController controller = PageController(initialPage: 200);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        height: 250.0,
        child: Container(
          color: Colors.grey,
          child: PageView.builder(
            controller: controller,
            itemBuilder: (context, index) {
              return new Center(
                child: new Text('页面 ${index}'),
              );
            },
          ),
        ));
  }
}

The above code will come to such an interface. Explain a little of code:

/// 指定一个控制器，用来控制PageView的滑动，以及初始位置在第200页
/// 主要为了实现“无限循环”
final PageController controller = PageController(initialPage: 200);

/// 一个固定大小的容器，这里指定了他的高为250
SizedBox(height: 250.0)
/// 一个容器，用来设定背景颜色为灰色
Container(color: Colors.grey)
/// 主角PageView,文字居中显示当前的索引。
PageView.builder(
            controller: controller,
            itemBuilder: (context, index) {
              return new Center(
                child: new Text('页面 ${index}'),
              );},),

II. To achieve an indicator

With unlimited sliding PageView after we come back associated with a pointer:

class Indicator extends StatelessWidget {
  Indicator({
    this.controller,
    this.itemCount: 0,
  }) : assert(controller != null);

  /// PageView的控制器
  final PageController controller;

  /// 指示器的个数
  final int itemCount;

  /// 普通的颜色
  final Color normalColor = Colors.blue;

  /// 选中的颜色
  final Color selectedColor = Colors.red;

  /// 点的大小
  final double size = 8.0;

  /// 点的间距
  final double spacing = 4.0;

  /// 点的Widget
  Widget _buildIndicator(
      int index, int pageCount, double dotSize, double spacing) {
    // 是否是当前页面被选中
    bool isCurrentPageSelected = index ==
        (controller.page != null ? controller.page.round() % pageCount : 0);

    return new Container(
      height: size,
      width: size + (2 * spacing),
      child: new Center(
        child: new Material(
          color: isCurrentPageSelected ? selectedColor : normalColor,
          type: MaterialType.circle,
          child: new Container(
            width: dotSize,
            height: dotSize,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: new List<Widget>.generate(itemCount, (int index) {
        return _buildIndicator(index, itemCount, size, spacing);
      }),
    );
  }
}

This code is relatively simple, in which build () method constructs a transverse List.
The Item List is a fixed-size dots, select a color, do not select another color.

III. PageView and associated indicator

class BannerGalleryWidgetState2 extends State<BannerGalleryWidget2> {
  final PageController controller = PageController(initialPage: 200);

  void _pageChanged(int index) {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        SizedBox(
            height: 150.0,
            child: Container(
              color: Colors.grey,
              child: PageView.builder(
                onPageChanged: _pageChanged,
                controller: controller,
                itemBuilder: (context, index) {
                  return new Center(
                    child: new Text('页面 ${index}'),
                  );
                },
              ),
            )),
        Indicator(
          controller: controller,
          itemCount: 5,
        ),
      ],
    );
  }
}

The layout container change it, wrapped with a column PageView and Indicator, PageView to add a onPageChanged, check when the page changes when setState () to refresh the UI just fine.

IV. Summarize
this point, unlimited sliding PageView indicator has been completed, although the look and columns beginning of the example image a little bit different, but needs at least achieved. But now this indicator is still relatively stupid, such as discoloration after only selected, but will not appear magnified. After the column where I teach you how to improve this indicator as well as provide a complete code for the entire project, so stay tuned.