Flutter社交登录按钮插件flutter_signin_button的使用

flutter_signin_button 是一个用于iOS和Android的Flutter插件，可以生成不同社交媒体账户的登录按钮。

欢迎提供反馈和Pull Requests！

安装 Installation

在 pubspec.yaml 文件中添加依赖：

dependencies:
  ...
  flutter_signin_button: ^2.0.0

使用示例 Usage Example

首先导入 flutter_signin_button.dart 文件：

import 'package:flutter_signin_button/flutter_signin_button.dart';

内置按钮 Built-in Buttons

SignInButton(
  Buttons.Google,
  onPressed: () {},
)

// 带自定义文本
SignInButton(
  Buttons.Google,
  text: "Sign up with Google",
  onPressed: () {},
)

小型按钮 Mini Buttons

SignInButton(
  Buttons.Facebook,
  mini: true,
  onPressed: () {},
)

自定义按钮 Self-build Buttons

SignInButtonBuilder(
  text: 'Sign in with Email',
  icon: Icons.email,
  onPressed: () {},
  backgroundColor: Colors.blueGrey[700]!,
)

内置按钮包括以下几种：

enum Buttons {
  Email,
  Google,
  GoogleDark,
  Facebook,
  FacebookNew,
  GitHub,
  LinkedIn,
  Pinterest,
  Tumblr,
  Twitter
}

更多详情请参阅 example 文件夹和源代码。

示例代码 Demo Code

下面是一个完整的示例代码，展示了如何使用 flutter_signin_button 插件来创建一个包含多种登录方式的应用程序界面。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  /// 这是一个使用 `SignInButtonBuilder` 和 `SignInButton` 类的示例应用程序
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: Scaffold(
        backgroundColor: Color.fromRGBO(50, 50, 50, 1.0),
        body: SignInPage(),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

class SignInPage extends StatelessWidget {
  /// 显示简单的 "___ Button Pressed" 提示信息
  void _showButtonPressDialog(BuildContext context, String provider) {
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('$provider Button Pressed!'),
      backgroundColor: Colors.black26,
      duration: Duration(milliseconds: 400),
    ));
  }

  /// 通常登录按钮应该包含在 SignInPage 中
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SignInButtonBuilder(
            text: 'Get going with Email',
            icon: Icons.email,
            onPressed: () {
              _showButtonPressDialog(context, 'Email');
            },
            backgroundColor: Colors.blueGrey[700]!,
            width: 220.0,
          ),
          Divider(),
          SignInButton(
            Buttons.Google,
            onPressed: () {
              _showButtonPressDialog(context, 'Google');
            },
          ),
          Divider(),
          SignInButton(
            Buttons.GoogleDark,
            onPressed: () {
              _showButtonPressDialog(context, 'Google (dark)');
            },
          ),
          Divider(),
          SignInButton(
            Buttons.FacebookNew,
            onPressed: () {
              _showButtonPressDialog(context, 'FacebookNew');
            },
          ),
          Divider(),
          SignInButton(
            Buttons.Apple,
            onPressed: () {
              _showButtonPressDialog(context, 'Apple');
            },
          ),
          Divider(),
          SignInButton(
            Buttons.GitHub,
            text: "Sign up with GitHub",
            onPressed: () {
              _showButtonPressDialog(context, 'Github');
            },
          ),
          Divider(),
          SignInButton(
            Buttons.Microsoft,
            text: "Sign up with Microsoft ",
            onPressed: () {
              _showButtonPressDialog(context, 'Microsoft ');
            },
          ),
          Divider(),
          SignInButton(
            Buttons.Twitter,
            text: "Use Twitter",
            onPressed: () {
              _showButtonPressDialog(context, 'Twitter');
            },
          ),
          Divider(),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SignInButton(
                Buttons.LinkedIn,
                mini: true,
                onPressed: () {
                  _showButtonPressDialog(context, 'LinkedIn (mini)');
                },
              ),
              SignInButton(
                Buttons.Tumblr,
                mini: true,
                onPressed: () {
                  _showButtonPressDialog(context, 'Tumblr (mini)');
                },
              ),
              SignInButton(
                Buttons.Facebook,
                mini: true,
                onPressed: () {
                  _showButtonPressDialog(context, 'Facebook (mini)');
                },
              ),
              SignInButtonBuilder(
                icon: Icons.email,
                text: "Ignored for mini button",
                mini: true,
                onPressed: () {
                  _showButtonPressDialog(context, 'Email (mini)');
                },
                backgroundColor: Colors.cyan,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

通过这个例子，你可以看到如何创建不同的登录按钮，并且每个按钮点击后会显示一条消息。你可以根据需要调整这些按钮的行为和样式。