Flutter UI认证插件appwrite_ui

Flutter UI认证插件appwrite_ui_auth的使用

Appwrite UI Auth 是一组用于设计和集成 Appwrite 认证功能的屏幕和配置。

功能支持

功能	Android	iOS
邮箱注册	✓	✓
邮箱登录	✓	✓
重置密码	✓	✓
手机认证	X	X
其他认证提供商	X	X
其余功能正在开发中

安装

flutter pub add appwrite_ui_auth

示例

以下是一个如何使用认证功能的示例。确保调用 init 方法时使用 await。

import 'package:appwrite_ui_auth/appwrite_ui_auth.dart';
import 'package:appwrite_ui_auth/classes/colors.dart';
import 'package:appwrite_ui_auth/classes/routes.dart';
import 'package:appwrite_ui_auth/screens/phone_auth/phone_auth.dart';
import 'package:example/home.dart';
import 'package:example/not_found.dart';
import 'package:example/theme_notifier.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AppwriteService.init(
    endpoint: 'https://appwrite.loca.lt/v1',
    projectId: 'appwrite-auth-ui',
    selfSigned: true,
  );
  runApp(const MyApp());
}

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

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

class _MyAppState extends State<MyApp> {
  final ThemeNotifier themeNotifier = ThemeNotifier();

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

  state() {
    WidgetsBinding.instance.window.onPlatformBrightnessChanged = () {};
    setState(() {});
  }

  // 这个widget是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.from(
        colorScheme: ColorScheme.fromSeed(
          seedColor: AppwriteColors.primary,
        ),
      ),
      darkTheme: ThemeData.from(
        colorScheme: ColorScheme.fromSeed(
          seedColor: AppwriteColors.primary,
          brightness: Brightness.dark,
        ),
      ),
      themeMode: ThemeNotifier.getTheme(),
      title: 'Appwrite UI Auth',
      initialRoute: '/',
      onGenerateRoute: (route) {
        return MaterialPageRoute(builder: (context) {
          AppwriteColors.init(context);

          switch (route.name!.split('?')[0]) {
            case '/':
              return HomePage(parentState: state);

            case AppwriteRoutes.forgotPassword:
              return AppwriteForgotPassword(
                title: 'Sample App',
                successCallback: (data) => 'success',
              );
            case AppwriteRoutes.resetPassword:
              return AppwriteResetPassword(
                title: 'Sample App',
                successCallback: (data) => 'success',
                params: route.name!.split('?')[1],
              );
            case AppwriteRoutes.signup:
              return AppwriteSignup(
                title: 'Sample App',
                successCallback: (data) => 'success',
              );
            case AppwriteRoutes.signin:
              return AppwriteSignin(
                title: 'Sample App',
                successCallback: (data) => 'success',
              );
            case AppwriteRoutes.phoneAuth:
              return AppwritePhoneAuth(
                title: 'Sample App',
                successCallback: (data) => 'success',
              );
            default:
              const NotFound();
          }
          return const NotFound();
        });
      },
    );
  }
}

更多关于Flutter UI认证插件appwrite_ui_auth的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼•5 天前

更多关于Flutter UI认证插件appwrite_ui_auth的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter应用中使用appwrite_ui_auth插件来实现UI认证的示例代码。这个插件可以帮助你快速集成Appwrite的认证功能到你的Flutter应用中。

首先，确保你已经在pubspec.yaml文件中添加了appwrite_ui_auth依赖：

dependencies:
  flutter:
    sdk: flutter
  appwrite_ui_auth: ^x.y.z  # 请替换为最新版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤来使用appwrite_ui_auth插件：

配置Appwrite项目：确保你已经在Appwrite控制台中创建了一个项目，并获取了项目的ID和API密钥。
创建认证服务：在你的Flutter应用中，创建一个认证服务实例，并配置Appwrite项目的信息。
使用AppwriteUIAuth小部件：将AppwriteUIAuth小部件添加到你的UI中，以显示认证界面。

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Appwrite UI Auth Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
    );
  }
}

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  // 配置Appwrite项目信息
  final String projectId = 'YOUR_PROJECT_ID'; // 替换为你的项目ID
  final String clientId = 'YOUR_CLIENT_ID';   // 替换为你的客户端ID（通常是API密钥）
  final String endpoint = 'https://YOUR_APPWRITE_ENDPOINT'; // 替换为你的Appwrite端点

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Appwrite UI Auth Example'),
      ),
      body: Center(
        child: AppwriteUIAuth(
          projectId: projectId,
          clientId: clientId,
          endpoint: endpoint,
          onSuccess: (user) {
            // 用户认证成功后执行的回调
            print('User authenticated successfully: $user');
            // 这里可以导航到应用的主页面
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => HomeScreen(user: user)),
            );
          },
          onError: (error) {
            // 认证过程中发生错误时执行的回调
            print('Authentication error: $error');
          },
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final Map<String, dynamic> user;

  HomeScreen({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Welcome, ${user['email']}!'),
            // 这里可以添加更多内容，比如用户信息展示、注销按钮等
          ],
        ),
      ),
    );
  }
}

在上面的代码中：

projectId、clientId和endpoint需要替换为你自己的Appwrite项目信息。
AppwriteUIAuth小部件负责显示认证界面，并在用户成功认证后调用onSuccess回调。
onSuccess回调中，你可以处理认证成功后的逻辑，比如导航到应用的主页面。
onError回调用于处理认证过程中发生的错误。

这样，你就可以在Flutter应用中快速集成并使用Appwrite的UI认证功能了。