Flutter自定义展示视图插件custom_showcase_view的使用

Flutter自定义展示视图插件custom_showcase_view的使用

CustomShowCaseView Flutter 插件允许你创建具有灵活设计的自定义展示视图，用于突出特定的部件并提供信息弹窗。通过此插件，你可以根据需求自由设计自己的展示视图。

特性

  1. 突出显示应用中的特定部件。
  2. 自定义展示视图的设计。
  3. 在高亮部件上方或下方显示弹窗。
  4. 为部件提供信息和详细说明。
  5. 控制展示视图的可见性。
  6. 指定展示视图的尺寸。
  7. 自定义背景颜色和透明度。
  8. 启用或禁用背景点击。
  9. 使用三角形指针指示器来高亮部件。

开始使用

要开始使用 CustomShowCaseView 插件，请确保已安装 Flutter。更多关于如何安装 Flutter 的信息可以在 flutter.dev 上找到。一旦 Flutter 设置完成，可以通过在 pubspec.yaml 文件中添加依赖项来将插件添加到你的项目中：

dependencies:
  custom_show_case_view: ^0.0.1

有关如何在 Flutter 中使用包的更多信息，请参阅 Flutter 包文档。

使用方法

以下是如何在你的 Flutter 应用程序中使用 CustomShowCaseView 插件的一个示例：

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

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

class _MyAppState extends State<MyApp> {
  bool show = true;

  final GlobalKey<State<StatefulWidget>> widgetKeyOne = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Showcase View Example'),
        ),
        body: CustomShowCaseView(
          globalKey: widgetKeyOne,
          show: show,
          height: 100,
          width: 300,
          pointerIndicatorColor: Colors.blue,
          overlayBackground: Colors.black.withOpacity(0.25),
          enableBackgroundClick: false,
          customShowCase: InkWell(
            onTap: () {
              setState(() {
                show = false;
              });
            },
            child: Container(
              height: 100,
              width: 300,
              padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const Text(
                    "This is a Custom Container",
                    style: TextStyle(color: Colors.white, fontSize: 14),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: const [
                      Text(
                        "Done",
                        style: TextStyle(color: Colors.white, fontSize: 14),
                      ),
                      Expanded(child: SizedBox()),
                      Icon(
                        Icons.close,
                        color: Colors.white,
                      ),
                      SizedBox(
                        width: 12,
                      ),
                      Icon(
                        Icons.done,
                        color: Colors.white,
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
          child: Text(
            "Custom Showcase",
            key: widgetKeyOne,
          ),
        ),
      ),
    );
  }
}

额外信息

你可以自由探索并定制 CustomShowCaseView 插件以满足你的需求。我们希望这个插件能通过为你的部件提供交互式和信息丰富的展示，提升你的应用程序用户体验。

完整示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个小部件是你的应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey globalWidgetOne = GlobalKey();
  bool show = true;
  bool flag = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Hello"),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CustomShowcaseView(
              show: show,
              height: 100,
              width: 300,
              pointerIndicatorColor: Colors.blue,
              overlayBackground: Colors.black.withOpacity(0.25),
              enableBackgroundClick: false,
              customShowCase: InkWell(
                onTap: () {
                  setState(
                    () {
                      show = false;
                    },
                  );
                },
                child: Container(
                  height: 100,
                  width: 300,
                  padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
                  decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(12)),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      const Text(
                        "This is Custom Container",
                        style: TextStyle(color: Colors.white, fontSize: 14),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: const [
                          Text(
                            "Done",
                            style: TextStyle(color: Colors.white, fontSize: 14),
                          ),
                          Expanded(child: SizedBox()),
                          Icon(
                            Icons.close,
                            color: Colors.white,
                          ),
                          SizedBox(
                            width: 12,
                          ),
                          Icon(
                            Icons.done,
                            color: Colors.white,
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              ),
              child: Text(
                "Custom Showcase",
                key: globalWidgetOne,
              ),
            ),
            const SizedBox(
              height: 12,
            ),
            InkWell(
              onTap: () {
                setState(() {
                  flag = !flag;
                  show = true;
                });
              },
              child: Text(
                "Click Me",
                style: TextStyle(color: flag ? Colors.red : Colors.brown),
              ),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // 这个逗号使自动格式化更美观。
    );
  }
}

更多关于Flutter自定义展示视图插件custom_showcase_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义展示视图插件custom_showcase_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


custom_showcase_view 是一个用于在 Flutter 应用中创建引导式展示视图的插件。它可以帮助你突出显示应用中的特定部分，并逐步引导用户了解应用的功能。以下是如何使用 custom_showcase_view 插件的步骤：

1. 添加依赖

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

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

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 custom_showcase_view 包：

import 'package:custom_showcase_view/custom_showcase_view.dart';

3. 使用 CustomShowcaseView

CustomShowcaseView 是一个包装器，你可以将它包裹在你想要展示的组件周围。它接受多个参数来配置展示视图的外观和行为。

CustomShowcaseView(
  showcaseKey: _showcaseKey,
  title: 'Welcome to My App',
  description: 'This is a showcase view to guide you through the app.',
  child: YourWidget(), // 你想要展示的组件
);

4. 创建 GlobalKey

为了唯一标识每个展示视图，你需要为每个 CustomShowcaseView 创建一个 GlobalKey：

final GlobalKey _showcaseKey = GlobalKey();

5. 控制展示视图的显示

你可以通过调用 CustomShowcaseView.of(context).show() 来手动触发展示视图的显示。通常，你可以在某个事件（如按钮点击）后调用它：

ElevatedButton(
  onPressed: () {
    CustomShowcaseView.of(context).show();
  },
  child: Text('Show Showcase'),
);

6. 配置展示视图

CustomShowcaseView 提供了多个参数来自定义展示视图的外观和行为：

  • title: 展示视图的标题。
  • description: 展示视图的描述。
  • titleTextStyle: 标题文本的样式。
  • descriptionTextStyle: 描述文本的样式。
  • shapeBorder: 展示视图的形状（如圆形、矩形等）。
  • overlayColor: 覆盖层的颜色。
  • overlayOpacity: 覆盖层的不透明度。
  • textColor: 文本的颜色。
  • blurValue: 背景模糊的程度。
  • radius: 展示视图的圆角半径。
  • padding: 展示视图的内边距。
  • onFinish: 当展示视图完成时触发的回调。

7. 完整示例

以下是一个完整的示例，展示了如何使用 CustomShowcaseView：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ShowcaseExample(),
    );
  }
}

class ShowcaseExample extends StatelessWidget {
  final GlobalKey _showcaseKey = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Showcase View Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CustomShowcaseView(
              showcaseKey: _showcaseKey,
              title: 'Welcome to My App',
              description: 'This is a showcase view to guide you through the app.',
              child: ElevatedButton(
                onPressed: () {
                  CustomShowcaseView.of(context).show();
                },
                child: Text('Show Showcase'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部