Flutter引导教程插件showcase_tutorial的使用

Flutter引导教程插件showcase_tutorial的使用

ShowCaseView

Flutter的一个包，允许你逐步展示/高亮你的小部件。

预览

以下是示例应用在iOS上运行的效果图：

1.0.0版本迁移指南

一些属性/字段名称发生了变化：

Showcase.withWidget()中移除了一些未使用的参数：

• title
• titleAlignment
• titleTextStyle
• description
• descriptionAlignment
• descTextStyle
• textColor
• tooltipBackgroundColor
• tooltipBorderRadius
• tooltipPadding

安装

1. 在pubspec.yaml中添加依赖：

dependencies:
    showcaseview: <latest-version>

1. 导入包：

import 'package:showcaseview/showcase_tutorial.dart';

1. 添加ShowCaseWidget小部件：

ShowCaseWidget(
  builder: Builder(
    builder: (context) => Somewidget()
  ),
),

1. 添加Showcase小部件：

GlobalKey _one = GlobalKey();
GlobalKey _two = GlobalKey();
GlobalKey _three = GlobalKey();

// ...

Showcase(
  key: _one,
  title: 'Menu',
  description: 'Click here to see menu options',
  child: Icon(
    Icons.menu,
    color: Colors.black45,
  ),
),

Showcase.withWidget(
  key: _three,
  height: 80,
  width: 140,
  targetShapeBorder: CircleBorder(),
  container: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      // 自定义内容
    ],
  ),
  child: ..., // 目标小部件
),

1. 开始ShowCase：

void someEvent() {
    ShowCaseWidget.of(context).startShowCase([_one, _two, _three]);
}

// 如果希望UI构建完成后立即开始ShowCase
WidgetsBinding.instance.addPostFrameCallback((_) =>
  ShowCaseWidget.of(context).startShowCase([_one, _two, _three])
);

ShowCaseWidget.of(context)的功能

ShowCaseWidget的属性

Showcase和Showcase.withWidget的属性

如何使用

请查看example目录中的示例应用或pub.dartlang.org上的’Example’标签以获取更完整的示例。

自动滚动到活动展示

在渲染小部件的需求视图（如ListView、GridView）中，自动滚动到活动展示可能无法正常工作。如果使用SingleChildScrollView不是选项，则可以将ScrollController分配给该视图，并手动滚动到展示小部件的位置。例如：

final _controller = ScrollController();

ShowCaseWidget(
  onStart: (index, key) {
    if(index == 0) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        // 如果展示小部件在列表视图中的偏移量为1000。
        // 如果不知道确切位置，可以提供最近的可能位置。
        _controller.jumpTo(1000);
      });
    }
  },
);

完整示例代码

以下是一个完整的示例代码，演示如何使用showcaseview插件：

import 'package:flutter/material.dart';
import 'package:showcaseview/showcase_tutorial.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ShowCaseWidget(
        builder: Builder(
          builder: (context) => HomePage()
        ),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey _one = GlobalKey();
  final GlobalKey _two = GlobalKey();
  final GlobalKey _three = GlobalKey();

  [@override](/user/override)
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) =>
      ShowCaseWidget.of(context).startShowCase([_one, _two, _three])
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Showcase Tutorial'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Showcase(
              key: _one,
              title: 'Menu',
              description: 'Click here to see menu options',
              child: Icon(
                Icons.menu,
                color: Colors.black45,
              ),
            ),
            SizedBox(height: 20),
            Showcase(
              key: _two,
              title: 'Search',
              description: 'Click here to search',
              child: Icon(
                Icons.search,
                color: Colors.black45,
              ),
            ),
            SizedBox(height: 20),
            Showcase.withWidget(
              key: _three,
              height: 80,
              width: 140,
              targetShapeBorder: CircleBorder(),
              container: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('Custom Tooltip'),
                  Text('This is a custom tooltip')
                ],
              ),
              child: Icon(
                Icons.notifications,
                color: Colors.black45,
              ),
            ),
          ],
        ),
      ),
    );
  }
}