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

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

安装

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

dependencies:
  ...
  flutter_signin_button2: ^1.0.0

使用示例

首先，在项目中导入flutter_signin_button2包：

import 'package:flutter_signin_button2/flutter_signin_button.dart';

内置按钮

使用内置按钮，例如Google登录按钮：

SignInButton(
  Buttons.Google,
  onPressed: () {
    // 处理点击事件
  },
)

你也可以自定义按钮上的文本：

SignInButton(
  Buttons.Google,
  text: "使用Google注册",
  onPressed: () {
    // 处理点击事件
  },
)

迷你按钮

对于迷你按钮，例如Facebook迷你按钮：

SignInButton(
  Buttons.Facebook,
  mini: true,
  onPressed: () {
    // 处理点击事件
  },
)

自定义按钮

使用SignInButtonBuilder创建自定义按钮：

SignInButtonBuilder(
  text: '使用电子邮件注册',
  icon: Icons.email,
  onPressed: () {
    // 处理点击事件
  },
  backgroundColor: Colors.blueGrey.shade700,
)

内置按钮枚举值

内置按钮包含以下枚举值：

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

示例代码

以下是完整的示例代码：

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

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

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

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

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

  /// 显示一个简单的 "___ 按钮已按下" 提示
  void _showButtonPressDialog(BuildContext context, String provider) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('$provider 按钮已按下！'),
      backgroundColor: Colors.black26,
      duration: const Duration(milliseconds: 400),
    ));
  }

  /// 登录按钮通常应该包含在 SignInPage 中
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SignInButtonBuilder(
            text: '开始使用电子邮件',
            icon: Icons.email,
            onPressed: () {
              _showButtonPressDialog(context, 'Email');
            },
            backgroundColor: Colors.blueGrey[700]!,
            width: 220.0,
          ),
          const Divider(),
          SignInButton(
            Buttons.Google,
            onPressed: () {
              _showButtonPressDialog(context, 'Google');
            },
          ),
          const Divider(),
          SignInButton(
            Buttons.GoogleDark,
            onPressed: () {
              _showButtonPressDialog(context, 'Google (暗色)');
            },
          ),
          const Divider(),
          SignInButton(
            Buttons.FacebookNew,
            onPressed: () {
              _showButtonPressDialog(context, 'FacebookNew');
            },
          ),
          const Divider(),
          SignInButton(
            Buttons.Apple,
            onPressed: () {
              _showButtonPressDialog(context, 'Apple');
            },
          ),
          const Divider(),
          SignInButton(
            Buttons.GitHub,
            text: '使用GitHub注册',
            onPressed: () {
              _showButtonPressDialog(context, 'GitHub');
            },
          ),
          const Divider(),
          SignInButton(
            Buttons.Microsoft,
            text: '使用Microsoft注册',
            onPressed: () {
              _showButtonPressDialog(context, 'Microsoft');
            },
          ),
          const Divider(),
          SignInButton(
            Buttons.Twitter,
            text: '使用Twitter',
            onPressed: () {
              _showButtonPressDialog(context, 'Twitter');
            },
          ),
          const Divider(),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SignInButton(
                Buttons.LinkedIn,
                mini: true,
                onPressed: () {
                  _showButtonPressDialog(context, 'LinkedIn (迷你)');
                },
              ),
              SignInButton(
                Buttons.Tumblr,
                mini: true,
                onPressed: () {
                  _showButtonPressDialog(context, 'Tumblr (迷你)');
                },
              ),
              SignInButton(
                Buttons.Facebook,
                mini: true,
                onPressed: () {
                  _showButtonPressDialog(context, 'Facebook (迷你)');
                },
              ),
              SignInButtonBuilder(
                icon: Icons.email,
                text: '忽略迷你按钮的文本',
                mini: true,
                onPressed: () {
                  _showButtonPressDialog(context, 'Email (迷你)');
                },
                backgroundColor: Colors.cyan,
              ),
            ],
          ),
        ],
      ),
    );
  }
}