Flutter欢迎页面插件welcomescreenflutter的使用

示例

以下是一个简单的示例代码，展示如何在Flutter应用中使用welcomescreenflutter插件：

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

class MyApp extends StatelessWidget {
  // 定义页面数据列表
  List<PageData> pageData = [
    PageData('新鲜食品', '制作一个干净且功能齐全的引导页布局。在这个部分我们将设置ViewPager的引导滑动。', 'assets/logo.png'),
    PageData('快速配送', '制作一个干净且功能齐全的引导页布局。在这个部分我们将设置ViewPager的引导滑动。', ''),
    PageData('便捷支付', '制作一个干净且功能齐全的引导页布局。在这个部分我们将设置ViewPager的引导滑动。', '')
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: IntroPage(
        numberOfPage: 3, // 设置总页数
        pageData: pageData, // 页面数据
        indicatorSize: 14, // 指示器大小
        activeIndicatorColor: Colors.redAccent, // 当前指示器颜色
        onPageChange: (value) {
          print(value); // 打印当前页面索引
        },
      ),
    );
  }
}

// 定义页面数据类
class PageData {
  final String title;
  final String description;
  final String imagePath;

  PageData(this.title, this.description, this.imagePath);
}

功能

以下是插件的主要功能展示：

入门指南

前提条件

1. 确保已安装Flutter SDK。
2. 在项目的pubspec.yaml文件中添加依赖项：

   dependencies:
     welcomescreenflutter: ^版本号

3. 运行flutter pub get以安装依赖。

使用步骤

1. 创建一个List<PageData>对象来存储引导页的数据。
2. 在IntroPage组件中传入numberOfPage、pageData等参数。
3. 配置其他可选参数如indicatorSize和activeIndicatorColor。

示例项目结构

完整的示例项目结构如下：

lib/
├── main.dart
└── my_app.dart

main.dart

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

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

my_app.dart

import 'package:flutter/material.dart';
import 'package:welcomescreenflutter/intro_page.dart';
import 'package:welcomescreenflutter/page_data.dart';

class MyApp extends StatelessWidget {
  List<PageData> pageData = [
    PageData('新鲜食品', '制作一个干净且功能齐全的引导页布局。在这个部分我们将设置ViewPager的引导滑动。', 'assets/logo.png'),
    PageData('快速配送', '制作一个干净且功能齐全的引导页布局。在这个部分我们将设置ViewPager的引导滑动。', ''),
    PageData('便捷支付', '制作一个干净且功能齐全的引导页布局。在这个部分我们将设置ViewPager的引导滑动。', '')
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: IntroPage(
        numberOfPage: 3,
        pageData: pageData,
        indicatorSize: 14,
        activeIndicatorColor: Colors.redAccent,
        onPageChange: (value) {
          print(value);
        },
      ),
    );
  }
}

class PageData {
  final String title;
  final String description;
  final String imagePath;

  PageData(this.title, this.description, this.imagePath);
}