Flutter系列05: 移动 Onboarding / Wal

Onboarding / Walkthrough为一种滑动导航指示器组件。滑动页由Flutter自带的PageView组件完成。
使用以下命令创建项目并切换目录

flutter create walkthrough
cd walkthrough

清空lib/main.dart内容后增加以下代码

import 'package:flutter/material.dart';

void main()=>runApp(MaterialApp(
  home: Welcome(),
));

class Welcome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [],
      )
    );
  }
}

为省事，本文采用flutter三方包高亮显示当前滑动页指示器。打开pubspec.yaml在依赖中增加dots_indicator:^0.0.4。

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  dots_indicator: ^0.0.4

增加一个新组件展示onboarding。

class Walkthrougth extends StatelessWidget {
  final String textContent;
  Walkthrougth({Key key, @required this.textContent}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.redAccent),
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: Center(child: Text(textContent)),
    );
  }
}

代码返回一个深红背景色全屏显示的容器，通过参数传递显示字符文本。
导入dot indicator包

import 'package:dots_indicator/dots_indicator.dart';

本按例使用Stack包含的Column组件放置Flutter的PageView组件——一个页面列表滚动组件。在Column的Children中增加PageView作为stack第一个子组件。PageView中放置Walkthrough对象列表，PageView带有onPageChanged属性用来触发换页事件。

        body: Stack(
      children: <Widget>[
              PageView(
          children: <Widget>[
            Walkthrougth(textContent: "Walkthrough one"),
            Walkthrougth(textContent: "Walkthrough two"),
            Walkthrougth(textContent: "Walkthrough tree"),
            Walkthrougth(textContent: "Walkthrough four"),
          ],
          onPageChanged: (value) {
            
          },
        )]
        )

定义两个变理分别为currentIndexPage和pageLength用来设置当前页索引和PageView列表长度，使用initState()方法初始化这些变量。代码如下

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

void main() => runApp(MaterialApp(
      home: Welcome(),
    ));

class Welcome extends StatefulWidget {
  @override
  _WelcomeState createState() => _WelcomeState();
}

class _WelcomeState extends State<Welcome> {
  int currentIndexPage;
  int pageLength;

  @override
  void initState() {
    currentIndexPage = 0;
    pageLength = 4;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: <Widget>[
        PageView(
          children: <Widget>[
            Walkthrougth(textContent: "Walkthrough one"),
            Walkthrougth(textContent: "Walkthrough two"),
            Walkthrougth(textContent: "Walkthrough tree"),
            Walkthrougth(textContent: "Walkthrough four"),
          ],
          onPageChanged: (value) {
            setState(() => currentIndexPage = value);
          },
        ),
        Positioned(
          top: MediaQuery.of(context).size.height * 0.7,
          // left: MediaQuery.of(context).size.width * 0.35,
          child: Padding(
            padding:
                EdgeInsets.only(left: MediaQuery.of(context).size.width * 0.35),
            child: Align(
              alignment: Alignment.centerRight,
              child: new DotsIndicator(
                  numberOfDot: pageLength,
                  position: currentIndexPage,
                  dotColor: Colors.black87,
                  dotActiveColor: Colors.amber),
            ),
          ),
        )
      ],
    ));
  }
}

Positioned组件放置在Stack的children头部，Padding组件进行左外留出空间。主要代码如下

DotsIndicator(
numberOfDot: pageLength,
position: currentIndexPage,
dotColor: Colors.black87,
dotActiveColor: Colors.amber),
)

从导入包里调用DotsIndicator组件，点的数量和位置值赋值到上面pageLength和currentIndexPage变量中。关于dots indicator包的变量配置。
通过onPageChanged设置currentIndexPage变量到当前页

onPageChanged: (value) {
setState(() => currentIndexPage = value);
}

运行代码如下图

image.png

样式不是很nice，可以在自己的安例中自行设计。