Flutter社交账号登录按钮插件social_auth_btn_kit的使用

Flutter UI组件库social_auth_btn_kit为您的项目提供了符合各社交平台品牌指南的社交登录按钮。社交登录几乎已成为每个应用的一部分，此插件使添加这些按钮变得更加简单。

支持的平台

• Facebook
• Google
• Apple

开始使用

首先，在您的项目中添加此依赖项：

flutter pub add social_auth_btn_kit

使用方法

Facebook

Facebook的品牌指南允许普通和轮廓两种按钮样式，可以通过variant参数传递FacebookTypeVariants枚举值。

enum FacebookTypeVariants {
  normal,
  outlined,
}

还可以通过theme参数配置主题变体：

enum FacebookThemeVariants {
  light,
  dark,
}

Google

Google的品牌指南支持三种主题按钮，可以通过theme参数传递GoogleThemeVariants枚举值。

enum GoogleThemeVariants {
  light,
  dark,
  neutral,
}

Apple

Apple按钮也根据其品牌指南增加了轮廓和深色支持。

SocialAuthBtn.facebook(
    variant: FacebookTypeVariants.outlined,
    onPressed: () {
        debugPrint("DEBUG: Facebook Btn Pressed");
    },
),

自定义按钮

您可以使用这些快速样式创建自己的按钮，只需将图标添加到您的资产文件夹并调用主构造函数即可。

SocialAuthBtn(
    onPressed: () {
        debugPrint("DEBUG: Instagram Btn Pressed");
    },
    icon: 'assets/instagram.png',
    text: 'Connect Instagram',
    borderSide: const BorderSide(),
),

示例Demo

以下是一个完整的示例demo，展示如何在Flutter应用中使用social_auth_btn_kit插件。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Social Auth Btn Kit Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Social Auth Btn Kit Demo'),
        ),
        backgroundColor: Colors.white,
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: ListView(
            children: [
              Center(
                child: SocialAuthBtn.facebook(
                  variant: FacebookTypeVariants.outlined,
                  onPressed: () => debugPrint("DEBUG: Facebook Btn Pressed"),
                  loading: true,
                ),
              ),
              const SizedBox(height: 16),
              Center(
                child: SocialAuthBtn.facebook(
                  onPressed: () => debugPrint("DEBUG: Facebook Btn Pressed"),
                ),
              ),
              const SizedBox(height: 16),
              Center(
                child: SocialAuthBtn.facebook(
                  theme: FacebookThemeVariants.dark,
                  onPressed: () => debugPrint("DEBUG: Facebook Btn Pressed"),
                ),
              ),
              const SizedBox(height: 16),
              Center(
                child: SocialAuthBtn.google(
                  onPressed: () => debugPrint("DEBUG: Google Btn Pressed"),
                ),
              ),
              const SizedBox(height: 16),
              Center(
                child: SocialAuthBtn.apple(
                  onPressed: () => debugPrint("DEBUG: Apple Btn Pressed"),
                ),
              ),
              const SizedBox(height: 16),
              Center(
                child: SocialAuthBtn(
                  onPressed: () => debugPrint("DEBUG: Instagram Btn Pressed"),
                  icon: 'assets/instagram.png',
                  text: 'Connect Instagram',
                  borderSide: const BorderSide(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何在Flutter应用中集成和使用social_auth_btn_kit插件来实现各种社交平台的登录按钮。