today_showcaseview 是一个用于在 Flutter 应用中展示引导视图的插件。它可以帮助你在应用中高亮显示某些特定的 UI 元素，并向用户提供引导信息。这个插件通常用于新用户引导、功能提示等场景。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 today_showcaseview 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  today_showcaseview: ^1.0.0  # 请使用最新版本

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

基本用法

1. 导入插件：

   在你的 Dart 文件中导入 today_showcaseview 插件：

   import 'package:today_showcaseview/today_showcaseview.dart';
   

2. 创建 Showcase 视图：

   使用 Showcase 组件来包裹你想要高亮的 UI 元素。Showcase 组件需要以下几个参数：

   • key: 一个唯一的 GlobalKey，用于标识这个 Showcase。
   • title: 引导视图的标题。
   • description: 引导视图的描述信息。
   • child: 你想要高亮的子组件。

   示例代码：

   class MyHomePage extends StatelessWidget {
     final GlobalKey _showcaseKey = GlobalKey();
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('ShowcaseView Example'),
         ),
         body: Center(
           child: Showcase(
             key: _showcaseKey,
             title: 'Welcome',
             description: 'This is a showcase view example.',
             child: ElevatedButton(
               onPressed: () {
                 // 按钮点击事件
               },
               child: Text('Click Me'),
             ),
           ),
         ),
       );
     }
   }
   

3. 启动 Showcase：

   你可以使用 ShowCaseWidget 来启动展示引导视图。通常，你会在 initState 或某个事件触发时启动它。

   示例代码：

   class MyHomePage extends StatefulWidget {
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     final GlobalKey _showcaseKey = GlobalKey();
   
     @override
     void initState() {
       super.initState();
       WidgetsBinding.instance.addPostFrameCallback((_) {
         ShowCaseWidget.of(context).startShowCase([_showcaseKey]);
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('ShowcaseView Example'),
         ),
         body: Center(
           child: Showcase(
             key: _showcaseKey,
             title: 'Welcome',
             description: 'This is a showcase view example.',
             child: ElevatedButton(
               onPressed: () {
                 // 按钮点击事件
               },
               child: Text('Click Me'),
             ),
           ),
         ),
       );
     }
   }
   

4. 自定义样式：

   你可以通过 Showcase 组件的 overlayColor、textColor、titleTextStyle 等参数来自定义引导视图的样式。

   示例代码：

   Showcase(
     key: _showcaseKey,
     title: 'Welcome',
     description: 'This is a showcase view example.',
     overlayColor: Colors.black.withOpacity(0.5),
     textColor: Colors.white,
     titleTextStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
     descriptionTextStyle: TextStyle(fontSize: 16),
     child: ElevatedButton(
       onPressed: () {
         // 按钮点击事件
       },
       child: Text('Click Me'),
     ),
   );
   

高级用法

• 多步骤引导：你可以通过传递多个 GlobalKey 给 startShowCase 方法来实现多步骤引导。

  ShowCaseWidget.of(context).startShowCase([_showcaseKey1, _showcaseKey2, _showcaseKey3]);
  

• 自定义动画：你可以通过 Showcase 组件的 animationDuration 和 animationCurve 参数来自定义引导视图的动画效果。

  Showcase(
    key: _showcaseKey,
    title: 'Welcome',
    description: 'This is a showcase view example.',
    animationDuration: Duration(milliseconds: 500),
    animationCurve: Curves.easeInOut,
    child: ElevatedButton(
      onPressed: () {
        // 按钮点击事件
      },
      child: Text('Click Me'),
    ),
  );