Flutter功能特性开关插件feature_flagix的使用

Flutter功能特性开关插件feature_flagix的使用

Feature Flagix 是一个轻量且灵活的功能标志库，适用于 Flutter 应用程序。它允许你根据应用程序中的角色和权限来控制功能的可见性。

安装

要将 Feature Flagix 添加到你的 Flutter 项目中，请在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  feature_flagix: ^1.0.2

然后，在终端运行以下命令：

flutter pub get

开始使用

初始化 Feature Flagix

首先，导入 feature_flagix 包并创建一个 FeatureFlagix 实例：

import 'package:feature_flagix/feature_flagix.dart';

// 创建一个 FeatureFlagix 实例
final FeatureFlagix featureFlagix = FeatureFlagix();

定义角色和权限

接下来，定义应用的角色和功能标志，并创建一个包含角色和权限的新实例：

import 'package:example/data/fake_flags.dart';
import 'package:feature_flagix/feature_flagix.dart';

// 定义应用角色
enum Roles {
  user,
  admin,
  moderator,
  custom,
}

// 定义功能标志
enum Flags {
  feature1,
  feature2,
  feature3,
  feature4,
}

// 创建一个 FlagixRoles 实例
FlagixRoles flagixModel = FlagixRoles(
  roles: {
    Roles.user: FlagixPermissions<String>(
      permissions: [
        Flags.feature1.name,
        Flags.feature2.name,
      ],
    ),
    Roles.admin: FlagixPermissions(
      permissions: [
        Flags.feature1.name,
        Flags.feature2.name,
        Flags.feature3.name,
        Flags.feature4.name,
      ],
    ),
    Roles.moderator: FlagixPermissions(
      permissions: [
        Flags.feature1.name,
        Flags.feature2.name,
        Flags.feature3.name,
      ],
    ),
    Roles.custom: FlagixPermissions(
      permissions: customFlags,
    ),
  },
);

设置当前角色

设置当前用户的角色：

// 设置当前用户的角色
featureFlagix.setCurrentRole(Roles.user);

确保在设置功能标志之前设置当前角色。最好在 MyApp 的 initState() 方法中设置当前角色。

设置功能标志

设置功能标志：

// 设置功能标志
featureFlagix.setFlags(flagixModel);

确保在设置功能标志之前已经设置了当前角色。否则，Flagix() 小部件会抛出错误。

检查权限

检查用户是否具有特定权限：

// 检查用户是否有特定权限
bool hasPermission = featureFlagix.hasPermission(Flags.feature1.name);

基于功能标志更新UI

使用 FeatureFlagix 来根据功能标志条件渲染UI元素：

// 使用 Flagix 条件渲染UI元素
Flagix(
  flag: Flags.feature1.name,
  child: const Card(
    child: ListTile(
      leading: Icon(Icons.person),
      title: Text('Feature 1'),
      subtitle: Text('This is Feature 1'),
    ),
  ),
),

// 使用 Flagix 条件渲染UI元素，并在用户没有所需权限时替换子小部件（可选）
Flagix(
  flag: Flags.feature1.name,
  replace: const Card(
    child: ListTile(
      leading: Icon(Icons.person),
      title: Text('Feature 1'),
      subtitle: Text('This is Feature 1'),
    ),
  ),
  child: const Card(
    child: ListTile(
      leading: Icon(Icons.person),
      title: Text('Feature 1'),
      subtitle: Text('This is Feature 1'),
    ),
  ),
),

示例

查看 example/ 目录中的示例文件以获取更详细的实现。

参与贡献

欢迎为该项目贡献代码或提出问题。请遵循 Flutter 风格指南进行更改。

许可证

MIT License

Copyright (c) 2023 Mustafa Ibrahim.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

作者

• Mustafa Ibrahim

示例代码

以下是完整的示例代码：

import 'package:example/data/fake_flags.dart';
import 'package:feature_flagix/feature_flagix.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 创建一个新的 FeatureFlagix 实例
  final FeatureFlagix featureFlagix = FeatureFlagix();

  // 创建一个新的 FlagixRoles 实例
  FlagixRoles flagixModel = FlagixRoles(
    roles: {
      Roles.user: FlagixPermissions<String>(
        permissions: [
          Flags.feature1.name,
          Flags.feature2.name,
        ],
      ),
      Roles.admin: FlagixPermissions(
        permissions: [
          Flags.feature1.name,
          Flags.feature2.name,
          Flags.feature3.name,
          Flags.feature4.name,
        ],
      ),
      Roles.moderator: FlagixPermissions(
        permissions: [
          Flags.feature1.name,
          Flags.feature2.name,
          Flags.feature3.name,
        ],
      ),
      Roles.custom: FlagixPermissions(
        permissions: customFlags,
      ),
    },
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    featureFlagix.setCurrentRole(Roles.user);
    // 初始化 FlagixModel 实例
    featureFlagix.setFlags(flagixModel);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Feature_flagix Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.greenAccent),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

enum Roles {
  user,
  admin,
  moderator,
  custom,
}

enum Flags {
  feature1,
  feature2,
  feature3,
  feature4,
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  // 创建一个新的 FeatureFlagix 实例
  final FeatureFlagix featureFlagix = FeatureFlagix();

  // 当前用户角色
  late Roles role;

  [@override](/user/override)
  void initState() {
    super.initState();
    role = Roles.user;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Feature_flagix'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          // 下拉按钮以更改当前用户角色
          DropdownButton<Roles>(
            value: role,
            onChanged: (Roles? value) {
              setState(() => role = value!);
              featureFlagix.setCurrentRole(role);
            },
            items: const <DropdownMenuItem<Roles>>[
              DropdownMenuItem<Roles>(
                value: Roles.user,
                child: Text('User'),
              ),
              DropdownMenuItem<Roles>(
                value: Roles.admin,
                child: Text('Admin'),
              ),
              DropdownMenuItem<Roles>(
                value: Roles.moderator,
                child: Text('Moderator'),
              ),
              DropdownMenuItem<Roles>(
                value: Roles.custom,
                child: Text('Custom'),
              ),
            ],
          ),
          const SizedBox(
            height: 20,
            width: double.infinity,
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute<void>(
                  builder: (BuildContext context) => const FlagsClass(),
                ),
              );
            },
            child: const Text('Go to Flags Page'),
          ),
        ],
      ),
    );
  }
}

// 显示当前功能标志的页面
class FlagsClass extends StatelessWidget {
  const FlagsClass({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Feature_flagix'),
      ),
      body: ListView(
        children: [
          Flagix(
            flag: Flags.feature1.name,
            child: const Card(
              child: ListTile(
                leading: Icon(Icons.person),
                title: Text('Feature 1'),
                subtitle: Text('This is Feature 1'),
              ),
            ),
          ),
          Flagix(
            flag: Flags.feature2.name,
            child: const Card(
              child: ListTile(
                leading: Icon(Icons.person),
                title: Text('Feature 2'),
                subtitle: Text('This is Feature 2'),
              ),
            ),
          ),
          Flagix(
            flag: Flags.feature3.name,
            child: const Card(
              child: ListTile(
                leading: Icon(Icons.person),
                title: Text('Feature 3'),
                subtitle: Text('This is Feature 3'),
              ),
            ),
          ),
          Flagix(
            flag: Flags.feature4.name,
            child: const Card(
              child: ListTile(
                leading: Icon(Icons.person),
                title: Text('Feature 4'),
                subtitle: Text('This is Feature 4'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}