Flutter社交媒体登录按钮插件 social_media_sign_in_buttons 的使用

简介

social_media_sign_in_buttons 是一个包含用于社交媒体登录的有用UI按钮的Flutter插件。这些按钮可以像普通的Flutter按钮一样进行自定义。

支持的社交媒体平台

• Facebook迷你按钮
• Google迷你按钮
• Apple迷你按钮
• WhatsApp迷你按钮

截图

贡献

如果您有任何建议或改进意见，欢迎提交PR或issue。

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 social_media_sign_in_buttons 插件。

示例代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Social Media Sign In Buttons Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Social Media Sign In Buttons Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({
    super.key,
    required this.title,
  });

  final String title;

  final ButtonStyle buttonStyle = ButtonStyle(
    side: MaterialStatePropertyAll(
      BorderSide(
        color: Colors.white,
        width: 0,
      ),
    ),
    minimumSize: MaterialStatePropertyAll(Size(0, 0)),
    backgroundColor: MaterialStatePropertyAll(Colors.white),
    padding: MaterialStatePropertyAll(EdgeInsets.all(0)),
    shape: MaterialStatePropertyAll(
      RoundedRectangleBorder(borderRadius: BorderRadius.circular(0)),
    ),
    fixedSize: MaterialStatePropertyAll(Size(100, 100)),
  );

  final double iconSide = 50;

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  GoogleIconMiniButton(
                    iconWidth: iconSide,
                    iconHeight: iconSide,
                    style: buttonStyle,
                    onPressed: () => print('Google'),
                  ),
                  _horizontalSpace(),
                  FacebookIconMiniButton(
                    iconWidth: iconSide,
                    iconHeight: iconSide,
                    style: buttonStyle,
                    onPressed: () => print('Facebook'),
                  ),
                  _horizontalSpace(),
                  AppleIconMiniButton(
                    iconWidth: iconSide,
                    iconHeight: iconSide,
                    style: buttonStyle,
                    onPressed: () => print('Apple'),
                  ),
                  _horizontalSpace(),
                  WhatsappIconMiniButton(
                    style: buttonStyle,
                    onPressed: () => print('Whatsapp'),
                  ),
                  _horizontalSpace(),
                  TelegramIconMiniButton(
                    style: buttonStyle,
                    onPressed: () => print('Telegram'),
                  ),
                ],
              ),
            ),
          ),
        ),
      );

  SizedBox _horizontalSpace() => const SizedBox(width: 10);
}

说明

1. 导入包：首先需要导入 social_media_sign_in_buttons 包。
2. 创建按钮样式：定义了一个 ButtonStyle 对象来设置按钮的样式，包括边框、背景色、内边距等。
3. 创建按钮：使用 GoogleIconMiniButton、FacebookIconMiniButton、AppleIconMiniButton、WhatsappIconMiniButton 和 TelegramIconMiniButton 创建社交媒体登录按钮，并设置点击事件。
4. 布局：使用 Row 和 SizedBox 来水平排列按钮，并添加间距。

通过以上步骤，您可以在Flutter应用中轻松地集成社交媒体登录按钮。希望这个示例对您有所帮助！