패키지, 저장소 및 앱 카테고리 검색

flutter_social_button 표지
패키지 상세v1.1.6+1

flutter_social_button

Flutter 소셜 버튼은 어떤 Flutter 앱에도 쉽게 소셜 미디어 로그인 버튼을 만들 수 있는 Flutter 패키지입니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
68
좋아요
41
Pub 점수
140

패키지 설치

flutter pub add flutter_social_button

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

Flutter Social Button은 Flutter 애플리케이션에 소셜 미디어 로그인 버튼을 통합하는 것을 간소화하는 가벼운 패키지입니다. Google, Facebook, Apple과 같은 인기 플랫폼용 사전 설계된 사용자 정의 가능한 버튼을 제공하여 사용자 인증 워크플로우를 향상시킵니다. Android, iOS, Web, macOS, Windows, Linux 등 여러 플랫폼을 지원하며 크로스 플랫폼 일관성을 보장합니다. 최소한의 설정으로 개발자는 앱에 시각적으로 매력적인 소셜 로그인 옵션을 빠르게 추가할 수 있습니다.

사용 사례

  • 인증 화면에 소셜 로그인 버튼 추가하기
  • 빠른 로그인 옵션을 통한 사용자 온보딩 향상
  • 다양한 플랫폼 간에 일관된 UI 만들기
  • Google, Facebook 및 Apple 로그인 통합
  • 브랜드 일치를 위한 버튼 스타일 맞춤화

주요 기능

  • 사전 구축된 소셜 미디어 버튼 템플릿
  • 크로스 플랫폼 지원 (Android, iOS, Web, macOS, Windows, Linux)
  • 색상과 크기의 간편한 사용자 정의
  • pub.dev를 통한 간단한 통합
  • 주요 소셜 제공업체를 지원합니다

적합한 대상

  • 인증 흐름을 구축하는 플러터 개발자
  • 빠른 소셜 로그인을 필요로 하는 앱
  • 다양한 플랫폼 간 일관된 UI를 목표로 하는 프로젝트
  • 개발 속도를 우선시하는 팀
  • 디자인 중심 애플리케이션

고려 사항

  • 각 소셜 제공자마다 추가 구성이 필요합니다
  • 플랫폼별 설정(예: OAuth 키)이 필요할 수 있습니다
  • 확장되지 않은 경우 사전 정의된 버튼 디자인에 제한됨
  • 기능을 위해 외부 소셜 API에 의존합니다
  • 스타일을 초과한 사용자 정의 버튼 로직에는 적합하지 않습니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Flutter Social Button

Flutter Social Button

pub package pub points LinkedIn Instagram Facebook Youtube


Features

Flutter Social Button is a Flutter package to easily add social media buttons to your app. Buttons are customizable, and the package supports a wide range of social platforms.


Getting Started

Add the following dependency to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_social_button: ^latest_version

Usage Example

import flutter_social_button.dart


import 'package:flutter_social_button/flutter_social_button.dart';

For built-in buttons.


// for full width Buttons

            //For default Button Its return a Email Button
               FlutterSocialButton(
                   onTap: () {}, ), 
                   
            //For facebook Button   
            
             FlutterSocialButton(
                onTap: () {},
                buttonType: ButtonType.facebook, // Button type for different type buttons
              ),
              
          //For google Button
          
               FlutterSocialButton(
                onTap: () {},
                buttonType: ButtonType.google, // Button type for different type buttons
                iconColor: Colors.black,  // for change icons colors
              ),  

           // for Mini Circle Button

                 FlutterSocialButton(
                    onTap: () {},
                    mini: true,   //just pass true for mini circle buttons
                    buttonType: ButtonType.phone,  // Button type for different type buttons
                  ),

Button Types

  • Facebook
  • Google
  • Yahoo
  • Twitter
  • LinkedIn
  • WhatsApp
  • Apple
  • GitHub
  • Phone
  • Email
  • Instagram
  • YouTube
  • Snapchat
  • Pinterest
  • TikTok
  • Reddit
  • Tumblr
  • Skype
  • Viber
  • Discord
  • WeChat
  • Line
  • Quora
  • Twitch
  • Flickr
  • Yelp
  • Spotify

Example

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Social Buttons"),
        centerTitle: true,
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              //For default Button
              FlutterSocialButton(
                onTap: () {},
              ),
              const SizedBox(
                height: 2,
              ),

              //For facebook Button
              FlutterSocialButton(
                onTap: () {},
                buttonType: ButtonType.facebook,
              ),
              const SizedBox(
                height: 2,
              ),

              //For google Button
              FlutterSocialButton(
                onTap: () {},
                buttonType: ButtonType.google,
              ),
              const SizedBox(
                height: 2,
              ),

              //For phone Button
              FlutterSocialButton(
                onTap: () {},
                buttonType: ButtonType.phone,
              ),

              const SizedBox(
                height: 2,
              ),

              //For Whatsapp Button
              FlutterSocialButton(
                onTap: () {},
                buttonType: ButtonType.whatsapp,
              ),
              const SizedBox(
                height: 2,
              ),

              const Divider(
                color: Colors.black,
                thickness: 2.5,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  FlutterSocialButton(
                    onTap: () {},
                    mini: true,
                  ),
                  FlutterSocialButton(
                    onTap: () {},
                    mini: true,
                    buttonType: ButtonType.facebook,
                  ),
                  FlutterSocialButton(
                    onTap: () {},
                    mini: true,
                    buttonType: ButtonType.google,
                  ),
                  FlutterSocialButton(
                    onTap: () {},
                    mini: true,
                    buttonType: ButtonType.phone,
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

카테고리

의존성

의존성 목록 1 개

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.