Flutter中如何使用ShowCaseView？如何实现仅首次启动展示？

我来帮你一步步搞定这两个需求，先从基础的组件使用说起，再解决首次启动才显示的问题～

问题1：如何在Flutter中使用ShowCaseView组件？ #

其实你已经写了大部分核心代码啦，我再帮你梳理完整的使用流程：

1. 添加依赖
   首先在你的pubspec.yaml里引入showcaseview包，记得用最新版本：

   dependencies:
     flutter:
       sdk: flutter
     showcaseview: ^latest_version # 替换成pub上的最新版本号
   

2. 用ShowCaseWidget包裹页面
   这个组件是整个引导流程的容器，它会提供控制引导的上下文，就像你代码里那样，把需要展示引导的页面用它包裹起来。

3. 给目标组件添加Showcase标记
   给你想要引导的UI组件套上Showcase组件，需要设置三个核心参数：

   • key：唯一标识这个引导步骤的全局key，用来告诉ShowCaseView要展示哪个组件
   • title：引导弹窗的标题
   • description：引导弹窗的描述文本

   比如你代码里给FloatingActionButton加的Showcase就是正确的写法。

4. 触发引导展示
   通常在页面初始化完成后触发，所以用WidgetsBinding.instance.addPostFrameCallback来确保UI渲染完成后再调用startShowCase，传入你要展示的key列表（如果是多步骤引导，就把所有key按顺序放进去）。

   你代码里的这部分逻辑是完全正确的，如果要加多个步骤，只需要再定义一个GlobalKey _two = GlobalKey()，给另一个组件套上Showcase，然后调用startShowCase([_one, _two])就行。

问题2：如何仅在应用首次启动时展示引导？ #

要实现这个需求，我们需要用本地存储来记录用户是否已经看过引导，这里推荐用shared_preferences包，它是Flutter里最常用的轻量本地存储方案。

完整实现步骤： #

1. 添加shared_preferences依赖
   同样在pubspec.yaml里加上：

   dependencies:
     # 其他依赖...
     shared_preferences: ^latest_version
   

2. 修改你的代码，加入存储判断逻辑
   我把你的代码修改后，加上了完整的首次启动判断逻辑：

   import 'package:flutter/material.dart';
   import 'package:showcaseview/showcaseview.dart';
   import 'package:shared_preferences/shared_preferences.dart';
   
   class YourDemoPage extends StatefulWidget {
     const YourDemoPage({super.key});
   
     @override
     State<YourDemoPage> createState() => _YourDemoPageState();
   }
   
   class _YourDemoPageState extends State<YourDemoPage> {
     final GlobalKey _one = GlobalKey();
     late BuildContext myContext;
   
     @override
     void initState() {
       super.initState();
       WidgetsBinding.instance.addPostFrameCallback((_) async {
         // 获取本地存储实例
         SharedPreferences prefs = await SharedPreferences.getInstance();
         // 读取是否已经展示过引导的标记，默认是false（首次启动）
         bool hasShownShowcase = prefs.getBool('hasShownShowcase') ?? false;
         // 如果没展示过，才启动引导
         if (!hasShownShowcase) {
           ShowCaseWidget.of(myContext).startShowCase([_one]);
         }
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return ShowCaseWidget(
         // 引导完成后，把标记设为true，存到本地
         onFinish: () async {
           SharedPreferences prefs = await SharedPreferences.getInstance();
           await prefs.setBool('hasShownShowcase', true);
         },
         builder: Builder(builder: (context) {
           myContext = context;
           return Scaffold(
             floatingActionButton: Showcase(
               key: _one,
               title: 'Title',
               description: 'Desc',
               child: FloatingActionButton(
                 onPressed: () { print("floating"); },
               ),
             ),
           );
         }),
       );
     }
   }
   

逻辑说明： #

• 我们用hasShownShowcase这个布尔值来记录用户是否看过引导，首次启动时这个值是null，所以我们用?? false把它默认设为false
• 在页面初始化完成后，先检查这个标记，如果是false就启动引导
• 当用户看完所有引导步骤（触发onFinish回调），我们把hasShownShowcase设为true并保存到本地，这样下次启动应用时就不会再显示引导了

额外提示： #

• 如果想要测试引导是否可以再次显示，可以在设备的应用设置里清除应用数据，这样SharedPreferences里的标记会被删除，引导就会再次出现
• 如果有多个引导步骤，只需要把所有步骤的key按顺序加入startShowCase的列表即可，onFinish会在所有步骤都完成后触发

内容的提问来源于stack exchange，提问作者user12776372