Onboarding / Walkthrough為一種滑動導(dǎo)航指示器組件挑势〕邓欤滑動頁由Flutter自帶的PageView組件完成饥努。
使用以下命令創(chuàng)建項目并切換目錄

flutter create walkthrough
cd walkthrough

清空lib/main.dart內(nèi)容后增加以下代碼

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三方包高亮顯示當(dāng)前滑動頁指示器拐叉。打開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)),
    );
  }
}

代碼返回一個深紅背景色全屏顯示的容器凤瘦，通過參數(shù)傳遞顯示字符文本。
導(dǎo)入dot indicator包

import 'package:dots_indicator/dots_indicator.dart';

本按例使用Stack包含的Column組件放置Flutter的PageView組件——一個頁面列表滾動組件案铺。在Column的Children中增加PageView作為stack第一個子組件蔬芥。PageView中放置Walkthrough對象列表，PageView帶有onPageChanged屬性用來觸發(fā)換頁事件。

        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用來設(shè)置當(dāng)前頁索引和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),
)

從導(dǎo)入包里調(diào)用DotsIndicator組件思喊，點的數(shù)量和位置值賦值到上面pageLength和currentIndexPage變量中。關(guān)于dots indicator包的變量配置次酌。
通過onPageChanged設(shè)置currentIndexPage變量到當(dāng)前頁

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

運行代碼如下圖

image.png

樣式不是很nice恨课，可以在自己的安例中自行設(shè)計。