Flutter开关控制插件flyswitch的使用

Flyswitch 是一个营销工具，它生成原生的状态组件，这些组件可以在不重新构建应用程序的情况下进行修改并发布。Flyswitch Flutter 包使开发者能够轻松地在他们的 Flutter 应用程序中连接和使用 Flyswitch 服务。

警告

此包仍在开发中，尚未准备好用于生产环境。虽然我们已经对其进行了充分测试，但仍可能存在一些未发现的错误。请自行承担使用风险。一旦包准备就绪，我们将更新此 README 文件。

开始使用

要将 Flyswitch 集成到您的 Flutter 应用程序中，请按照以下步骤操作：

在 FlySwitch 平台上

1. 在 https://flyswitch.io 创建账户。
2. 如果还没有项目，请创建一个新的项目；否则，使用现有的项目。
3. 在您的应用中创建所需的部件，或者使用现有的部件。
4. 使用 Flyswitch UI 构建器设计您的部件。
5. 点击“部署”按钮以发布您的部件。
6. 单击“连接”按钮以获取您的 API 密钥和部件 ID。

在 Flutter 应用中

1. 在 main.dart 文件中导入 Flyswitch 包：

   import 'package:flyswitch/flyswitch.dart';
   

2. 在 main 函数中初始化 Flyswitch：

   void main() {
     WidgetsFlutterBinding.ensureInitialized();
     // 初始化 Flyswitch 并传入从 Flyswitch 平台获得的 API 密钥
     FlySwitch.init("API_KEY");
     runApp(const MyApp());
   }
   

显示部件

可以通过以下两种方式之一来显示部件：

加载后再显示

// 加载部件（可选）
// 如果不加载部件，调用 show 方法时会自动加载
await FlySwitch.i.load("WIDGET_ID");

// 显示部件
// 如果部件已加载，则直接显示；否则先加载再显示
FlySwitch.i.show("WIDGET_ID");

直接使用 show 方法加载并显示

// 直接加载并显示部件
// 如果部件未加载，则先加载再显示；如果已加载，则直接显示
FlySwitch.i.show("WIDGET_ID");

完整示例代码

以下是完整的示例代码，展示如何在 Flutter 应用中使用 Flyswitch 插件。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化 Flyswitch，并传入 API 密钥
  FlySwitch.init("LFhOYeMhbf-y212eOicqj-UkJRzwG1UT");
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      navigatorKey: FlySwitch.i.navigationKey, // 设置导航键
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('你点击按钮的次数为：'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 加载并显示部件
          await FlySwitch.i.load("63ea54c12e3219cdee592a7e");
          FlySwitch.i.show("63ea54c12e3219cdee592a7e");

          // 或者直接使用 show 方法加载并显示部件
          // await FlySwitch.i.show("63e2745f190b8fad18369b21");
        },
        tooltip: '增加计数',
        child: const Icon(Icons.add),
      ),
    );
  }
}