Flutter引导页插件introduction_story的使用

Flutter引导页插件introduction_story的使用

插件介绍

introduction_story 是一个受社交媒体故事启发的屏幕，可以用来作为新用户引导或功能介绍。以下是该插件的一个示例动画：

开始使用

1. 在 pubspec.yaml 文件中添加 introduction_story 依赖：

dependencies:
  introduction_story: ^0.1.0

使用方法

1. 在你的 Dart 文件中添加以下导入语句：

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

1. 声明引导页面应该是什么样子，并通过 Navigator 推送该页面：

Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) {
          return IntroductionStoryScreen(
            stories: [
              Story(
                imagePath: 'assets/image_1.png', // 图片路径
                featureName: 'Here you can write the story name', // 故事名称
                title: 'Here you can write the title', // 标题
                description: 'Here you can write the description', // 描述
              ),
              Story(
                imagePath: 'assets/image_2.png',
                featureName: 'Here you can write the story name',
                title: 'Here you can write the title',
                description: 'Here you can write the description',
              ),
            ],
          );
        },
      ),
    );

文档说明

Story 类

StoryDecoration 类

完整示例代码

以下是一个完整的示例，展示如何在应用程序中使用 introduction_story 插件：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:introduction_story/introduction_story.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Introduction Story',
      theme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Story Introduction'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.all(14),
              child: Text.rich(
                TextSpan(
                  text:
                      '我们假设这是新提供的功能的简要说明。请查看下面的CTA。\n',
                  children: [
                    TextSpan(
                      text: '点击以获取关于 $_featureName 的更多信息。 🍇',
                      style: const TextStyle(
                        decoration: TextDecoration.underline,
                        color: Colors.lightBlueAccent,
                      ),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () => _pushIntroductionStoriesScreen(context),
                    )
                  ],
                ),
              ),
            ),
            Expanded(
              child: ListView.separated(
                padding: const EdgeInsets.all(12),
                separatorBuilder: (_, __) => const SizedBox(height: 12),
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    height: 200,
                    decoration: BoxDecoration(
                      color: Colors.grey[200]?.withOpacity(.1),
                      borderRadius: BorderRadius.circular(20),
                      image: const DecorationImage(
                        image: AssetImage('assets/placeholder.png'),
                      ),
                    ),
                  );
                },
                itemCount: 5,
              ),
            ),
          ],
        ),
      ),
    );
  }

  String get _featureName => 'Grocery Store'; // 功能名称

  void _pushIntroductionStoriesScreen(BuildContext context) {
    Navigator.push<void>(
      context,
      PageRouteBuilder(
        opaque: false,
        pageBuilder: (_, __, ___) => IntroductionStoryScreen(
          isDismissible: true,
          stories: [
            Story(
              imagePath: 'assets/image_1.png', // 图片路径
              name: _featureName, // 故事名称
              title: '在线杂货购物', // 标题
              description:
                  '购买您喜欢的杂货以及即食产品，由新鲜食材制成，每天为您准备。', // 描述
            ),
            Story(
              imagePath: 'assets/image_2.png',
              title: '我们的目标是优质品质',
              name: _featureName,
              description:
                  '类别：新鲜水果、蔬菜和草药、面包和糕点、奶酪、乳制品和熟食、甜点和糖果。',
              decoration: const StoryDecoration(lightMode: false), // 自定义装饰
            ),
            Story(
              imagePath: 'assets/image_3.png',
              title: '我们快速送货上门',
              name: _featureName,
              description:
                  '您的美食杂货只需点击一下即可！选择您喜欢的杂货并在15分钟内收到您的订单。',
              decoration: const StoryDecoration(lightMode: false), // 自定义装饰
            ),
          ],
        ),
      ),
    );
  }
}