Flutter认证按钮组件插件auth_button_kit的使用

Flutter认证按钮组件插件auth_button_kit的使用

简介

AuthButtonKit 是一个用于Flutter的前端包，专为Android和iOS设计，帮助开发者轻松创建美观的登录按钮。这些按钮特别针对移动设备进行了优化，不建议在电脑屏幕上使用。该插件会自动调整按钮的图标、文本和加载器的颜色，以确保与背景颜色的良好对比。

使用方法

AuthButtonKit 提供了两种主要的使用方式：

1. 单个按钮 (AuthButton)： 用于创建单个认证按钮。

2. 多个按钮 (AuthMultiButtons)： 用于创建一组认证按钮。

示例代码

以下是一个完整的示例代码，展示了如何使用 AuthButtonKit 创建单个按钮、多个按钮以及自定义按钮。

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

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

class ExampleApp extends StatelessWidget {
  const ExampleApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      themeMode: ThemeMode.system,
      home: const Example(),
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
    );
  }
}

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

  [@override](/user/override)
  State<Example> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<Example> {
  Method? brandSelected;

  void toogle(Method brand) {
    setState(() {
      brandSelected = brand;
      Future.delayed(const Duration(seconds: 2), () {
        setState(() {
          brandSelected = null;
        });
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Auth Buttons Example'),
      ),
      body: IgnorePointer(
        ignoring: brandSelected != null,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 单个按钮 ↓
            AuthButton(
              onPressed: (b) => toogle(b),
              brand: Method.tiktok,
              text: 'Continue with {brand}',
              backgroundColor: Theme.of(context).brightness == Brightness.light
                  ? Colors.black
                  : Colors.white,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30),
                side: const BorderSide(color: Colors.transparent),
              ),
              fontFamily: 'Inter',
              showLoader: brandSelected == Method.tiktok,
            ),
            const SizedBox(height: 20),
            // 多个按钮 ↓
            AuthMultiButtons(
              onPressed: (b) => toogle(b),
              brands: const [
                Method.google,
                Method.apple,
              ],
              text: 'Sign in with {brand}',
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30),
                side: BorderSide(
                    color: Theme.of(context).brightness == Brightness.light
                        ? const Color(0xFFAFBCC7)
                        : Colors.transparent,
                    width: 1.5),
              ),
              fontFamily: 'Inter',
              showLoader: brandSupported.contains(brandSelected),
            ),
            const SizedBox(height: 20),
            // 自定义按钮 ↓
            AuthButton(
              onPressed: (b) => toogle(b),
              brand: Method.custom,
              text: 'Custom',
              textCentering: Centering.independent,
              textColor: const Color(0xFF46c5fb),
              backgroundColor: const Color(0xFF171106),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8),
                side: BorderSide(
                  color: Theme.of(context).brightness == Brightness.light
                      ? Colors.transparent
                      : const Color(0xFF46c5fb),
                  width: 1.5,
                ),
              ),
              fontFamily: 'Inter',
              showLoader: brandSelected == Method.custom,
              loaderColor: const Color(0xFF46c5fb),
              splashEffect: false,
              customImage: Image.asset('assets/images/Flutter.png'),
              padding: const EdgeInsets.symmetric(horizontal: 100, vertical: 12),
            ),
            const SizedBox(height: 50),
          ],
        ),
      ),
    );
  }
}