Flutter自定义登录按钮插件custom_signin_buttons的使用

Flutter自定义登录按钮插件custom_signin_buttons的使用

介绍

custom_signin_buttons 是一个旨在以更简便和更可定制的方式创建登录按钮的包。

安装

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

dependencies:
  ...
  custom_signin_buttons: ^1.0.0

使用示例

导入 custom_signin_buttons.dart 包：

import 'package:custom_signin_buttons/custom_signin_buttons.dart';

内置按钮示例

以下是内置按钮的使用示例：

// Google 登录按钮
SignInButton(
  Buttons.Google,
)

// 带自定义文本的 Discord 登录按钮
SignInButton(
  button: Button.Discord,
  text: 'Inicia con Discord', // 开始使用 Discord
),

小型按钮示例

// 小型 Facebook 登录按钮
SignInButton(
  Buttons.Facebook,
  mini: true,
)

精简按钮示例

// 精简 Facebook 登录按钮
SignInButton(
  Buttons.Facebook,
  small: true,
)

自定义构建按钮示例

// 自定义电子邮件登录按钮
CustomSignInButton(
  text: 'Sign In With Email', // 使用电子邮件登录
  customIcon: Icons.email,
  buttonColor: Colors.blue,
  iconColor: Colors.grey,
  textColor: Colors.grey,
  mini: false,
)

// 小型自定义图标按钮
CustomSignInButton(
  customIcon: FontAwesomeIcons.envelopeOpen, // 邮件图标
  buttonColor: Colors.blue,
  iconColor: Colors.grey,
  mini: true,
),

注意：onPressed(){} 不是必须的。

内置按钮包含

以下是内置按钮枚举：

enum Button {
  Apple,
  AppleDark,
  Discord,
  Email,
  Facebook,
  FacebookNew,
  GitHub,
  Google,
  GoogleBlue,
  GoogleBlack,
  GooglePlay,
  Instagram,
  InstagramGradient,
  LinkedIn,
  Pinterest,
  PlayStation,
  PlayStationGradient,
  Reddit,
  RedditGradient,
  Steam,
  SteamGradient,
  Spotify,
  SpotifyLight,
  TikTok,
  Twitch,
  TwitchLight,
  Twitter,
  Xbox,
  XboxDark,
  Youtube,
  YoutubeDark,
}

完整示例 Demo

以下是完整示例代码，展示了如何使用 custom_signin_buttons 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false, // 关闭调试横幅
        title: 'Material App',
        home: ButtonPage());
  }
}

class ButtonPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      body: Container(
        margin: EdgeInsets.symmetric(horizontal: 30), // 水平边距
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
            children: [
              // Apple Dark 登录按钮
              SignInButton(
                button: Button.AppleDark,
                borderRadius: 15, // 圆角
                height: 40, // 高度
                iconSize: 30, // 图标大小
                mini: false, // 是否小型
                onPressed: () {}, // 点击事件
                splashColor: Colors.pink, // 溅射颜色
                small: false, // 是否精简
                showText: true, // 显示文本
                textSize: 15, // 文本大小
                width: 300, // 宽度
              ),
              // 小型 Apple Dark 登录按钮
              SignInButton(
                button: Button.AppleDark,
                small: true,
                iconSize: 50, // 图标大小
              ),
              SizedBox(height: 10), // 间距
              // 小型 TikTok 登录按钮
              SignInButton(
                button: Button.TikTok,
                small: true,
              ),
              SizedBox(height: 10), // 间距
              // Email 登录按钮
              SignInButton(button: Button.Email),
              SizedBox(height: 10), // 间距
              // 自定义 Facebook 登录按钮
              CustomSignInButton(
                height: 80, // 高度
                width: 80, // 宽度
                iconLeftPadding: 2, // 左侧图标填充
                iconTopPadding: 2, // 上方图标填充
                iconSize: 62, // 图标大小
                customIcon: FontAwesomeIcons.facebookF, // 自定义图标
                iconColor: Colors.white, // 图标颜色
                buttonColor: Colors.blue.shade700, // 按钮颜色
              )
            ],
          ),
        ),
      ),
    );
  }
}