Flutter认证按钮插件auth_buttons的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter认证按钮插件auth_buttons的使用

auth_buttons 是一个Flutter插件，它提供了一组用于与最流行的社交网络进行身份验证的按钮，如Google、Facebook、Apple等。以下是该插件的详细使用指南。

安装

  1. 在项目的 pubspec.yaml 文件中添加依赖：

    dependencies:
  auth_buttons: ^last_version

  2. 通过命令行安装插件：

    $ flutter pub get

  3. 在Dart代码中导入插件：

    import 'package:auth_buttons/auth_buttons.dart';

    推荐使用 show 关键字只引入你需要的部分，例如：

    import 'package:auth_buttons/auth_buttons.dart'
    show GoogleAuthButton, AuthButtonStyle, AuthButtonType, AuthIconType;

使用方法

按钮类型

从版本 3.0.0 开始，所有 AuthButtons 都遵循系统模式（ThemeMode）。你可以通过 AuthButtonGroup 组合多个按钮以共享样式属性。此外，版本 2.0.0 支持禁用状态。

默认类型

GoogleAuthButton(
  onPressed: () {},
),

图标类型

GoogleAuthButton(
  onPressed: () {},
  style: AuthButtonStyle(
    buttonType: AuthButtonType.icon,
  ),
),

次要类型

GoogleAuthButton(
  onPressed: () {},
  style: AuthButtonStyle(
    buttonType: AuthButtonType.secondary,
  ),
),

禁用状态

GoogleAuthButton(
  onPressed: null, // 设置为null表示禁用
  style: AuthButtonStyle(
    buttonType: AuthButtonType.default,
  ),
),

组合按钮

可以使用 AuthButtonGroup 来组合多个按钮，并共享一些样式属性：

AuthButtonGroup(
  style: const AuthButtonStyle(
    width: 180,
    height: 50,
    borderColor: Colors.purple,
    borderWidth: 3.0,
    margin: EdgeInsets.only(bottom: 8.0),
  ),
  buttons: [
    GoogleAuthButton(),
    AppleAuthButton(),
    FacebookAuthButton(),
    GithubAuthButton(),
    MicrosoftAuthButton(),
    TwitterAuthButton(),
    EmailAuthButton(),
    HuaweiAuthButton(),
  ]
),

自定义按钮

如果你需要使用未提供的社交登录按钮，比如LinkedIn，可以使用 CustomAuthButton 快速创建自定义按钮。

示例代码

以下是一个完整的示例代码，展示了如何在应用中使用 auth_buttons 插件：

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

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

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isLoading = false;
  bool darkMode = false;

  AuthButtonType? buttonType;
  AuthIconType? iconType;

  ThemeMode get themeMode => darkMode ? ThemeMode.dark : ThemeMode.light;

  @override
  Widget build(BuildContext context) {
    const String appName = 'Auth Buttons Example';
    return MaterialApp(
      title: appName,
      themeMode: themeMode,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appName),
          actions: [
            Switch(
              value: darkMode,
              onChanged: (value) {
                setState(() {
                  darkMode = value;
                });
              },
            ),
          ],
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              _chooseButtonType(),
              _chooseIconType(),
              const SizedBox(height: 24),
              GoogleAuthButton(
                onPressed: () {
                  // your implementation
                  setState(() {
                    isLoading = !isLoading;
                  });
                },
                themeMode: themeMode,
                isLoading: isLoading,
                style: AuthButtonStyle(
                  buttonType: buttonType,
                  iconType: iconType,
                  margin: const EdgeInsets.only(bottom: 18),
                ),
              ),
              AuthButtonGroup(
                style: AuthButtonStyle(
                  width: 185,
                  height: 38,
                  progressIndicatorType: AuthIndicatorType.linear,
                  buttonType: buttonType,
                ),
                buttons: [
                  GoogleAuthButton(
                    onPressed: () {
                      // your implementation
                      setState(() {
                        isLoading = !isLoading;
                      });
                    },
                    themeMode: themeMode,
                    isLoading: isLoading,
                    style: AuthButtonStyle(
                      buttonType: buttonType,
                      iconType: iconType,
                    ),
                  ),
                  AppleAuthButton(
                    onPressed: () {},
                    themeMode: themeMode,
                    isLoading: isLoading,
                    style: AuthButtonStyle(
                      buttonType: buttonType,
                      iconType: iconType,
                    ),
                  ),
                  FacebookAuthButton(
                    onPressed: () {},
                    themeMode: themeMode,
                    isLoading: isLoading,
                    style: AuthButtonStyle(
                      buttonType: buttonType,
                      iconType: iconType,
                    ),
                  ),
                  GithubAuthButton(
                    onPressed: () {},
                    themeMode: themeMode,
                    isLoading: isLoading,
                    style: AuthButtonStyle(
                      buttonType: buttonType,
                      iconType: iconType,
                    ),
                  ),
                  MicrosoftAuthButton(
                    onPressed: () {},
                    themeMode: themeMode,
                    isLoading: isLoading,
                    style: AuthButtonStyle(
                      buttonType: buttonType,
                      iconType: iconType,
                    ),
                  ),
                  TwitterAuthButton(
                    onPressed: () {},
                    themeMode: themeMode,
                    isLoading: isLoading,
                    style: AuthButtonStyle(
                      buttonType: buttonType,
                      iconType: iconType,
                    ),
                  ),
                  EmailAuthButton(
                    onPressed: () {},
                    themeMode: themeMode,
                    isLoading: isLoading,
                    style: AuthButtonStyle(
                      buttonType: buttonType,
                      iconType: iconType,
                    ),
                  ),
                  HuaweiAuthButton(
                    onPressed: () {},
                    themeMode: themeMode,
                    isLoading: isLoading,
                    style: AuthButtonStyle(
                      buttonType: buttonType,
                      iconType: iconType,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _chooseButtonType() {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            'Auth Button Types',
            style: TextStyle(
              fontSize: 24,
            ),
          ),
          Row(
            children: [
              const Text('default'),
              Radio<AuthButtonType?>(
                value: null,
                groupValue: buttonType,
                onChanged: (AuthButtonType? value) {
                  setState(() {
                    buttonType = value;
                  });
                },
              ),
              const Text('secondary'),
              Radio<AuthButtonType>(
                value: AuthButtonType.secondary,
                groupValue: buttonType,
                onChanged: (AuthButtonType? value) {
                  setState(() {
                    buttonType = value;
                  });
                },
              ),
              const Text('icon'),
              Radio<AuthButtonType>(
                value: AuthButtonType.icon,
                groupValue: buttonType,
                onChanged: (AuthButtonType? value) {
                  setState(() {
                    buttonType = value;
                  });
                },
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _chooseIconType() {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            'Auth Icon Types',
            style: TextStyle(
              fontSize: 24,
            ),
          ),
          Row(
            children: [
              const Text('default'),
              Radio<AuthIconType?>(
                value: null,
                groupValue: iconType,
                onChanged: (AuthIconType? value) {
                  setState(() {
                    iconType = value;
                  });
                },
              ),
              const Text('outlined'),
              Radio<AuthIconType?>(
                value: AuthIconType.outlined,
                groupValue: iconType,
                onChanged: (AuthIconType? value) {
                  setState(() {
                    iconType = value;
                  });
                },
              ),
              const Text('secondary'),
              Radio<AuthIconType?>(
                value: AuthIconType.secondary,
                groupValue: iconType,
                onChanged: (AuthIconType? value) {
                  setState(() {
                    iconType = value;
                  });
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

这个示例展示了如何创建一个包含不同类型的认证按钮的应用程序，并允许用户选择不同的按钮和图标样式。希望这能帮助你更好地理解和使用 auth_buttons 插件。


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

Harmonyos Next教程
1 回复

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


当然，auth_buttons 是一个 Flutter 插件，用于方便地创建各种社交认证按钮，如 Google Sign In、Facebook Login 等。以下是一个如何在 Flutter 应用中使用 auth_buttons 插件的示例代码。

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

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

然后，运行 flutter pub get 来获取依赖。

接下来，在你的 Flutter 应用中，你可以使用 AuthButton 组件来创建认证按钮。以下是一个完整的示例代码：

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

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

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

class AuthButtonExample extends StatefulWidget {
  @override
  _AuthButtonExampleState createState() => _AuthButtonExampleState();
}

class _AuthButtonExampleState extends State<AuthButtonExample> {
  void handleGoogleSignIn() {
    // 在这里处理 Google Sign In 的逻辑
    // 通常你会调用一个方法来启动 Google Sign In 流程
    print('Google Sign In button clicked');
  }

  void handleFacebookLogin() {
    // 在这里处理 Facebook Login 的逻辑
    // 通常你会调用一个方法来启动 Facebook Login 流程
    print('Facebook Login button clicked');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Auth Buttons Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AuthButton(
              AuthButtonType.googleSignIn,
              onPressed: handleGoogleSignIn,
            ),
            SizedBox(height: 20),
            AuthButton(
              AuthButtonType.facebookLogin,
              onPressed: handleFacebookLogin,
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中包含了两个认证按钮：Google Sign In 和 Facebook Login。当用户点击这些按钮时，会调用 handleGoogleSignIn 和 handleFacebookLogin 方法，分别打印出按钮被点击的信息。

在实际应用中，你需要在 handleGoogleSignIn 和 handleFacebookLogin 方法中集成相应的认证逻辑。这通常涉及启动认证流程、处理认证结果以及将用户信息存储在你的应用中。

请注意，auth_buttons 插件本身并不处理实际的认证逻辑，它只是提供了一个方便的 UI 组件。实际的认证流程需要集成 Google Sign In SDK 和 Facebook Login SDK，这通常涉及更多的配置和代码。你可以查阅这些 SDK 的官方文档来获取更多信息。

回到顶部