Flutter页面指示器插件flutter_page_indicator的使用

flutter_page_indicator简介

flutter_page_indicator 是一个用于Flutter应用中的页面指示器插件，支持多种内置布局样式。

使用场景

安装

在项目的 pubspec.yaml 文件中添加以下依赖：

flutter_page_indicator:

然后运行以下命令以获取依赖：

flutter packages get

基本用法

以下是一个基本的使用示例：

new PageIndicator(
  layout: PageIndicatorLayout.SLIDE, // 设置页面指示器的布局样式
  size: 20.0, // 指示器的大小
  controller: YOUR_PAGE_CONTROLLER, // 页面控制器
  space: 5.0, // 指示器之间的间距
  count: 4, // 总页数
)

所有内置布局样式

布局名称	展示图	支持版本
PageIndicatorLayout.NONE		从 0.0.1 开始
PageIndicatorLayout.SLIDE		从 0.0.1 开始
PageIndicatorLayout.WARM		从 0.0.1 开始
PageIndicatorLayout.COLOR		从 0.0.1 开始
PageIndicatorLayout.SCALE		从 0.0.1 开始
PageIndicatorLayout.DROP		从 0.0.1 开始

完整示例代码

以下是一个完整的示例代码，展示如何使用 flutter_page_indicator 插件：

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(primarySwatch: Colors.blue),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => new _MyHomePageState();
}

class RadioGroup extends StatefulWidget {
  final List<String> titles;
  final ValueChanged<int> onIndexChanged;

  const RadioGroup({Key key, this.titles, this.onIndexChanged}) : super(key: key);

  [@override](/user/override)
  State<StatefulWidget> createState() {
    return new _RadioGroupState();
  }
}

class _RadioGroupState extends State<RadioGroup> {
  int _index = 1;

  [@override](/user/override)
  Widget build(BuildContext context) {
    List<Widget> list = [];
    for (int i = 0; i < widget.titles.length; ++i) {
      list.add(((String title, int index) {
        return new Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new Radio<int>(
                value: index,
                groupValue: _index,
                onChanged: (int index) {
                  setState(() {
                    _index = index;
                    widget.onIndexChanged(_index);
                  });
                }),
            new Text(title)
          ],
        );
      })(widget.titles[i], i));
    }

    return new Wrap(
      children: list,
    );
  }
}

class _MyHomePageState extends State<MyHomePage> {
  int _index = 1;

  double size = 20.0;
  double activeSize = 30.0;

  PageController controller;

  PageIndicatorLayout layout = PageIndicatorLayout.SLIDE;

  List<PageIndicatorLayout> layouts = PageIndicatorLayout.values;

  bool loop = false;

  [@override](/user/override)
  void initState() {
    controller = new PageController();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    var children = <Widget>[
      new Container(color: Colors.red),
      new Container(color: Colors.green),
      new Container(color: Colors.blueAccent),
      new Container(color: Colors.grey)
    ];

    return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new Column(
          children: <Widget>[
            new Row(
              children: <Widget>[
                new Checkbox(
                    value: loop,
                    onChanged: (bool value) {
                      setState(() {
                        if (value) {
                          controller = new TransformerPageController(
                              itemCount: 4,
                              loop: true);
                        } else {
                          controller = new PageController(initialPage: 0);
                        }
                        loop = value;
                      });
                    }),
                new Text("loop"),
              ],
            ),
            new RadioGroup(
              titles: layouts.map((s) {
                var str = s.toString();
                return str.substring(str.indexOf(".") + 1);
              }).toList(),
              onIndexChanged: (int index) {
                setState(() {
                  _index = index;
                  layout = layouts[index];
                });
              },
            ),
            new Expanded(
                child: new Stack(
              children: <Widget>[
                loop
                    ? new TransformerPageView.children(
                        children: children,
                        pageController: controller,
                      )
                    : new PageView(
                        controller: controller,
                        children: children,
                      ),
                new Align(
                  alignment: Alignment.bottomCenter,
                  child: new Padding(
                    padding: new EdgeInsets.only(bottom: 20.0),
                    child: new PageIndicator(
                      layout: layout,
                      size: size,
                      activeSize: activeSize,
                      controller: controller,
                      space: 5.0,
                      count: 4,
                    ),
                  ),
                )
              ],
            ))
          ],
        ));
  }
}