FancyOnBoarding

精美新用户引导屏幕库。

fancy_on_boarding

? 安装

在 pubspec.yaml 的 dependencies: 部分，添加以下行

Version

fancy_on_boarding: <latest_version>

❔ 用法

导入此类

import 'package:fancy_on_boarding/fancy_on_boarding.dart';

创建PageModel列表

  final pageList = [
    PageModel(
        color: const Color(0xFF678FB4),
        heroImagePath: 'assets/png/hotels.png',
        title: Text('Hotels',
            style: TextStyle(
              fontWeight: FontWeight.w800,
              color: Colors.white,
              fontSize: 34.0,
            )),
        body: Text('All hotels and hostels are sorted by hospitality rating',
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontSize: 18.0,
            )),
        iconImagePath: 'assets/png/key.png'),
    PageModel(
        color: const Color(0xFF65B0B4),
        heroImagePath: 'assets/png/banks.png',
        title: Text('Banks',
            style: TextStyle(
              fontWeight: FontWeight.w800,
              color: Colors.white,
              fontSize: 34.0,
            )),
        body: Text(
            'We carefully verify all banks before adding them into the app',
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontSize: 18.0,
            )),
        iconImagePath: 'assets/png/wallet.png'),
    PageModel(
      color: const Color(0xFF9B90BC),
      heroImagePath: 'assets/png/stores.png',
      title: Text('Store',
          style: TextStyle(
            fontWeight: FontWeight.w800,
            color: Colors.white,
            fontSize: 34.0,
          )),
      body: Text('All local stores are categorized for your convenience',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.white,
            fontSize: 18.0,
          )),
      icon: Icon(
        Icons.shopping_cart,
        color: const Color(0xFF9B90BC),
      ),
    ),
    // SVG Pages Example
    PageModel(
        color: const Color(0xFF678FB4),
        heroImagePath: 'assets/svg/hotel.svg',
        title: Text('Hotels SVG',
            style: TextStyle(
              fontWeight: FontWeight.w800,
              color: Colors.white,
              fontSize: 34.0,
            )),
        body: Text('All hotels and hostels are sorted by hospitality rating',
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontSize: 18.0,
            )),
        iconImagePath: 'assets/svg/key.svg',
        heroImageColor: Colors.white),
    PageModel(
        color: const Color(0xFF65B0B4),
        heroImagePath: 'assets/svg/bank.svg',
        title: Text('Banks SVG',
            style: TextStyle(
              fontWeight: FontWeight.w800,
              color: Colors.white,
              fontSize: 34.0,
            )),
        body: Text(
            'We carefully verify all banks before adding them into the app',
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontSize: 18.0,
            )),
        iconImagePath: 'assets/svg/cards.svg',
        heroImageColor: Colors.white),
    PageModel(
      color: const Color(0xFF9B90BC),
      heroImagePath: 'assets/svg/store.svg',
      title: Text('Store SVG',
          style: TextStyle(
            fontWeight: FontWeight.w800,
            color: Colors.white,
            fontSize: 34.0,
          )),
      body: Text('All local stores are categorized for your convenience',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.white,
            fontSize: 18.0,
          )),
      iconImagePath: 'assets/svg/cart.svg',
    ),
  ];

将其传递给FancyOnBoarding小部件

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FancyOnBoarding(
        doneButtonText: "Done",
        skipButtonText: "Skip",
        pageList: pageList,
        onDoneButtonPressed: () =>
            Navigator.of(context).pushReplacementNamed('/mainPage'),
        onSkipButtonPressed: () =>
            Navigator.of(context).pushReplacementNamed('/mainPage'),
      ),
    );
  }

? 定制和属性

FancyOnBoarding属性

属性名 示例值 描述
pageList List<PageModel> 要显示的页面列表
onDoneButtonPressed (){} 按下完成按钮时调用的函数
onSkipButtonPressed (){} 按下跳过按钮时调用的函数
doneButtonText "Let's Go" 完成按钮文本内容默认为“Done”
skipButtonText "Skip" 跳过按钮文本内容默认为“Skip”
showSkipButton 真 是否显示跳过按钮。默认为true
bottomMargin 8.0 指示器的底部边距。默认为8.0
doneButton Button(onPressed:(){},child:Text('Done')) 自定义完成按钮。如果提供，将替换默认的完成按钮
skipButton Button(onPressed:(){},child:Text('Skip')) 自定义跳过按钮。如果提供，将替换默认的完成按钮

PageModel属性

属性名 示例值 描述
color Color(0xFF65B0B4) 页面的背景颜色
heroAssetPath 'assets/banks.png' 主要的引导图像
heroAssetColor Color(0xFF65B0B4) 主要的引导图像颜色
title Text('Banks') 页面的标题
body Text('We carefully verify all banks before adding them into the app') 页面的主体
iconAssetPath 'assets/wallet.png' 浮动气泡的图标
icon Icon(Icons.shopping_cart) 浮动气泡的图标，如果提供，将替换“iconAssetPath”

GitHub

https://github.com/xsahil03x/fancy_on_boarding