Flutter社交账号授权登录插件social_auth_buttons的使用

简介

social_auth_buttons 是一个用于Flutter应用中实现社交账号授权登录的插件。它支持多种流行的社交网络平台，如Google、Facebook、Twitter等，并且还支持传统的邮箱密码登录。

推荐用法

我们推荐在需要使用特定按钮时，使用 show 关键字来导入部分库：

import 'package:social_auth_buttons/social_auth_buttons.dart'
    show GoogleAuthButton, AuthButtonStyle;

按钮样式

social_auth_buttons 提供了两种主要的按钮样式：

1. 默认样式
2. 图标样式

默认样式示例

GoogleAuthButton(
  onPressed: () {},
  darkMode: false,
),

GoogleAuthButton(
  onPressed: () {},
  darkMode: true,
),

图标样式示例

GoogleAuthButton(
  onPressed: () {},
  darkMode: false,
  style: AuthButtonStyle.icon,
),

GoogleAuthButton(
  onPressed: () {},
  darkMode: true,
  style: AuthButtonStyle.icon,
),

示例代码

以下是一个完整的示例代码，展示了如何使用 social_auth_buttons 插件来创建一个包含多种社交登录按钮的应用界面：

import 'package:social_auth_buttons/res/shared/colors.dart';
import 'package:social_auth_buttons/social_auth_buttons.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String appName = 'Auth Buttons Example';
  bool darkMode = false;
  AuthButtonStyle? authButtonStyle;
  Color githubBtnColor = Colors.white;
  Color facebookBtnColor = Colors.white;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appName,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appName),
        ),
        body: Container(
          width: double.infinity,
          color: darkMode ? Color(0xff303030) : Colors.white,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => setState(() => darkMode = !darkMode),
                child: Text('Dark / Light mode'),
              ),
              ElevatedButton(
                onPressed: () => setState(() {
                  authButtonStyle =
                      authButtonStyle == null ? AuthButtonStyle.icon : null;
                }),
                child: Text('Icon / Extended mode'),
              ),
              ElevatedButton(
                onPressed: () => setState(() {
                  facebookBtnColor = facebookBtnColor == Colors.white
                      ? buttonFacebookColor
                      : Colors.white;
                  githubBtnColor = githubBtnColor == Colors.white
                      ? buttonGithubColor
                      : Colors.white;
                }),
                child: Text('GitHub and Facebook Button Color'),
              ),
              SizedBox(height: 50),
              GoogleAuthButton(
                onPressed: () {},
                darkMode: darkMode,
                style: authButtonStyle,
                width: authButtonStyle == null ? 300 : null,
              ),
              SizedBox(height: 10),
              AppleAuthButton(
                onPressed: () {},
                darkMode: darkMode,
                style: authButtonStyle,
                width: authButtonStyle == null ? 300 : null,
              ),
              SizedBox(height: 10),
              FacebookAuthButton(
                onPressed: () {},
                darkMode: darkMode,
                style: authButtonStyle,
                buttonColor: facebookBtnColor,
                width: authButtonStyle == null ? 300 : null,
              ),
              SizedBox(height: 10),
              GithubAuthButton(
                onPressed: () {},
                darkMode: darkMode,
                style: authButtonStyle,
                buttonColor: githubBtnColor,
                width: authButtonStyle == null ? 300 : null,
              ),
              SizedBox(height: 10),
              MicrosoftAuthButton(
                onPressed: () {},
                darkMode: darkMode,
                style: authButtonStyle,
                width: authButtonStyle == null ? 300 : null,
              ),
              SizedBox(height: 10),
              TwitterAuthButton(
                onPressed: () {},
                darkMode: darkMode,
                style: authButtonStyle,
                width: authButtonStyle == null ? 300 : null,
              ),
              SizedBox(height: 10),
              EmailPasswordAuthButton(
                onPressed: () {},
                darkMode: darkMode,
                style: authButtonStyle,
                width: authButtonStyle == null ? 300 : null,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

通过上述代码，你可以快速地在你的Flutter应用中集成各种社交账号的授权登录按钮，并且可以根据需求自定义按钮的样式和行为。