Flutter新用户引导插件flutter_onboard的使用

flutter_onboard 是一个用于Flutter应用的新用户引导插件，支持Android和iOS平台。它可以帮助开发者快速实现美观的新手引导页。

安装

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

dependencies:
  flutter_onboard: ^2.0.0

然后运行 flutter pub get 来安装该插件。

基本用法

首先，导入 flutter_onboard 包：

import 'package:flutter_onboard/flutter_onboard.dart';

接下来，在您的应用中使用 OnBoard 组件：

OnBoard(
    onBoardData: onBoardData,
    pageController: pageController,
    // Either Provide onSkip Callback or skipButton Widget to handle skip state
    onSkip: () {
      print('skipped');
    },
    // Either Provide onDone Callback or nextButton Widget to handle done state
    onDone: () {
      print('done tapped');
    },
)

OnBoardModel 示例

定义您的引导页面数据：

final List<OnBoardModel> onBoardData = [
  const OnBoardModel(
    title: "Set your own goals and get better",
    description: "Goal support your motivation and inspire you to work harder",
    imgUrl: "assets/images/weight.png",
  ),
  const OnBoardModel(
    title: "Track your progress with statistics",
    description: "Analyse personal result with detailed chart and numerical values",
    imgUrl: 'assets/images/graph.png',
  ),
  const OnBoardModel(
    title: "Create photo comparisons and share your results",
    description: "Take before and after photos to visualize progress and get the shape that you dream about",
    imgUrl: 'assets/images/phone.png',
  ),
];

自定义用法

您可以根据需要自定义 OnBoard 组件的各种属性。以下是部分可配置的属性列表：

自定义用法示例

下面是一个更复杂的自定义用法示例，其中使用了 provider 包来访问 OnBoardState：

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

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final PageController _pageController = PageController();
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: OnBoard(
        pageController: _pageController,
        onSkip: () {
          // print('skipped');
        },
        onDone: () {
          // print('done tapped');
        },
        onBoardData: onBoardData,
        titleStyles: const TextStyle(
          color: Colors.deepOrange,
          fontSize: 18,
          fontWeight: FontWeight.w900,
          letterSpacing: 0.15,
        ),
        descriptionStyles: TextStyle(
          fontSize: 16,
          color: Colors.brown.shade300,
        ),
        pageIndicatorStyle: const PageIndicatorStyle(
          width: 100,
          inactiveColor: Colors.deepOrangeAccent,
          activeColor: Colors.deepOrange,
          inactiveSize: Size(8, 8),
          activeSize: Size(12, 12),
        ),
        skipButton: TextButton(
          onPressed: () {
            // print('skipButton pressed');
          },
          child: const Text(
            "Skip",
            style: TextStyle(color: Colors.deepOrangeAccent),
          ),
        ),
        nextButton: OnBoardConsumer(
          builder: (context, ref, child) {
            final state = ref.watch(onBoardStateProvider);
            return InkWell(
              onTap: () => _onNextTap(state),
              child: Container(
                width: 230,
                height: 50,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  gradient: const LinearGradient(
                    colors: [Colors.redAccent, Colors.deepOrangeAccent],
                  ),
                ),
                child: Text(
                  state.isLastPage ? "Done" : "Next",
                  style: const TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  void _onNextTap(OnBoardState onBoardState) {
    if (!onBoardState.isLastPage) {
      _pageController.animateToPage(
        onBoardState.page + 1,
        duration: const Duration(milliseconds: 250),
        curve: Curves.easeInOutSine,
      );
    } else {
      //print("nextButton pressed");
    }
  }
}

final List<OnBoardModel> onBoardData = [
  const OnBoardModel(
    title: "Set your own goals and get better",
    description: "Goal support your motivation and inspire you to work harder",
    imgUrl: "assets/images/weight.png",
  ),
  const OnBoardModel(
    title: "Track your progress with statistics",
    description: "Analyse personal result with detailed chart and numerical values",
    imgUrl: 'assets/images/graph.png',
  ),
  const OnBoardModel(
    title: "Create photo comparisons and share your results",
    description: "Take before and after photos to visualize progress and get the shape that you dream about",
    imgUrl: 'assets/images/phone.png',
  ),
];