Flutter用户管理与网格布局插件apptive_grid_user_management的使用

ApptiveGrid UserManagement 是一个用于实现用户管理和网格布局的 Flutter 插件。它可以帮助开发者轻松地添加用户登录、注册和账户管理功能。

安装

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

dependencies:
  apptive_grid_user_management: ^最新版本号

然后运行 flutter pub get 来获取新的依赖包。

配置

在你的 Flutter 应用中添加 ApptiveGridUserManagement 小部件。建议将其放置在靠近 ApptiveGrid 的位置。

ApptiveGrid(
  child: ApptiveGridUserManagement(
    group: 'YOUR_GROUP_ID', // 替换为你的组ID
    onChangeEnvironment: (newEnvironment) async {}, // 环境改变时调用的回调
    confirmAccountPrompt: (confirmationWidget) {
      // 显示确认小部件
    },
    onAccountConfirmed: (loggedIn) {
      // 处理账户确认逻辑
    },
    child: MyApp(), // 你的应用根小部件
  ),
)

Android 配置

在 AndroidManifest.xml 中添加以下条目以支持打开确认链接：

<activity>
  ...
  <intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    <data
      android:host="alpha.apptivegrid.de"
      android:pathPattern="/auth/YOUR_GROUP_ID/confirm/.*"
      android:scheme="YOUR_SCHEME"/>
    <data
      android:host="beta.apptivegrid.de"
      android:pathPattern="/auth/YOUR_GROUP_ID/confirm/.*"
      android:scheme="YOUR_SCHEME"/>
    <data
      android:host="app.apptivegrid.de"
      android:pathPattern="/auth/YOUR_GROUP_ID/confirm/.*"
      android:scheme="YOUR_SCHEME"/>
  </intent-filter>
</activity>

iOS 配置

对于 iOS，你需要进行以下配置来支持打开确认链接：

使用通用链接（HTTPS 作为方案）

在 Runner.entitlements 文件中添加以下内容：

<key>com.apple.developer.associated-domains</key>
<array>
  <string>applinks:alpha.apptivegrid.de</string>
  <string>applinks:beta.apptivegrid.de</string>
  <string>applinks:app.apptivegrid.de</string>
</array>

使用自定义方案

在 Info.plist 文件中添加以下内容：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Viewer</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_SCHEMA</string>
    </array>
  </dict>
</array>

显示登录/注册内容

在你的屏幕中添加 ApptiveGridUserManagementContent 小部件以显示登录/注册界面。主题将从你的应用主题中继承。

Card(
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: ApptiveGridUserManagementContent(
      initialContentType: ContentType.login, // 初始内容类型为登录
      onLogin: () {
        context.go('/home'); // 登录后导航到主页
      },
    ),
  ),
)

删除账户

为了符合苹果审核指南的要求，如果你的应用提供账户创建功能，则必须提供删除账户的功能。该插件提供了几个小部件来展示删除账户的选项。

// 作为 ListTile
DeleteAccount.listTile(
  onAccountDeleted: () {
    // 跳转到登录页面等操作
  },
),

// 作为 TextButton
DeleteAccount.textButton(
  onAccountDeleted: () {
    // 跳转到登录页面等操作
  },
),

// 作为自定义小部件
DeleteAccount(
  onAccountDeleted: () {
    // 跳转到登录页面等操作
  },
  child: CustomWidget(), // 自定义子小部件
),

点击这些小部件会显示一个对话框，让用户确认是否要删除他们的账户。

示例代码

以下是完整的示例代码，展示了如何使用 ApptiveGridUserManagement 插件。

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

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

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

  final _navigatorKey = GlobalKey<NavigatorState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ApptiveGrid(
      options: const ApptiveGridOptions(
        environment: ApptiveGridEnvironment.alpha,
      ),
      child: Builder(
        builder: (context) {
          return ApptiveGridUserManagement(
            group: 'YOUR_USER_GROUP', // 替换为你的用户组ID
            clientId: 'app',
            redirectScheme: 'resetTest',
            confirmAccountPrompt: (confirmWidget) {
              // 显示确认小部件
              _navigatorKey.currentState?.push(
                MaterialPageRoute(
                  builder: (_) => Scaffold(
                    appBar: AppBar(
                      title: const Text('Confirm Account'),
                    ),
                    body: SingleChildScrollView(
                      child: confirmWidget,
                    ),
                  ),
                ),
              );
            },
            onAccountConfirmed: (loggedIn) {
              // 账户被确认
              // 如果未登录则跳转到登录页面
              ScaffoldMessenger.of(_navigatorKey.currentContext!).showSnackBar(
                SnackBar(
                  content: Text('Account Confirmed. LoggedIn: $loggedIn'),
                ),
              );
              if (loggedIn) {
                Navigator.of(context).pushReplacement(
                  MaterialPageRoute(
                    builder: (_) {
                      return const AccountPage();
                    },
                  ),
                );
              } else {
                _navigatorKey.currentState?.pop();
              }
            },
            resetPasswordPrompt: (resetPasswordWidget) {
              // 显示重置密码小部件
              _navigatorKey.currentState?.push(
                MaterialPageRoute(
                  builder: (_) => Scaffold(
                    appBar: AppBar(
                      title: const Text('Reset Password'),
                    ),
                    body: SingleChildScrollView(
                      child: resetPasswordWidget,
                    ),
                  ),
                ),
              );
            },
            onPasswordReset: (loggedIn) async {
              // 用户重置了密码
              // 跳转到登录页面
              debugPrint('Password reset success');
              debugPrint('User is now loggedIn: $loggedIn');
              _navigatorKey.currentState?.pop();
            },
            passwordRequirement: PasswordRequirement.safetyHint,
            child: MaterialApp(
              navigatorKey: _navigatorKey,
              title: 'Apptive Grid User Management Example',
              theme: ThemeData(
                primarySwatch: Colors.blue,
              ),
              home: const LoginRegistrationPage(),
            ),
          );
        },
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Login/Register'),
      ),
      body: ListView(
        children: [
          Padding(
            padding: const EdgeInsets.all(8),
            child: Card(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: ApptiveGridUserManagementContent(
                  appName: 'ApptiveGridUserManagement Example',
                  onLogin: () {
                    Navigator.of(context).pushReplacement(
                      MaterialPageRoute(
                        builder: (_) {
                          return const AccountPage();
                        },
                      ),
                    );
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  State<AccountPage> createState() => _AccountPageState();
}

class _AccountPageState extends State<AccountPage> {
  User? _user;

  [@override](/user/override)
  void didChangeDependencies() {
    super.didChangeDependencies();
    ApptiveGrid.getClient(context).getMe().then((user) {
      setState(() {
        _user = user;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Account'),
      ),
      body: Builder(
        builder: (_) {
          if (_user == null) {
            return const Center(
              child: CircularProgressIndicator.adaptive(),
            );
          } else {
            return Column(
              children: [
                Text('Logged in as ${_user!.firstName} ${_user!.lastName}'),
                TextButton(
                  onPressed: () {
                    ApptiveGrid.getClient(context, listen: false)
                        .logout()
                        .then((_) {
                      if (context.mounted) {
                        Navigator.of(context).pushReplacement(
                          MaterialPageRoute(
                            builder: (_) {
                              return const LoginRegistrationPage();
                            },
                          ),
                        );
                      }
                    });
                  },
                  child: const Text('Logout'),
                ),
                DeleteAccount.textButton(
                  onAccountDeleted: () {
                    WidgetsBinding.instance.addPostFrameCallback((_) {
                      Navigator.of(context).pushReplacement(
                        MaterialPageRoute(
                          builder: (_) {
                            return const LoginRegistrationPage();
                          },
                        ),
                      );
                    });
                  },
                ),
              ],
            );
          }
        },
      ),
    );
  }
}