Create custom social login button Google, Facebook and Apple ui in Flutter

Let’s create custom social login buttons for Google, Facebook, and Apple in Flutter without using any external packages.

Step 1: Set Up Your Flutter Project

If you haven’t already, start by creating a new Flutter project.

flutter create social_login_buttons
cd social_login_buttons

Step 2: Design the UI for the Buttons

We’ll create custom widgets for Google, Facebook, and Apple login buttons.

Step 3: Implement the Social Login Buttons

Create a new file called social_login_buttons.dart in the lib directory.

touch lib/social_login_buttons.dart

In this file, define custom widgets for each button:

import 'package:flutter/material.dart';

class SocialLoginButton extends StatelessWidget {
  final String text;
  final Color color;
  final String logo;
  final VoidCallback onPressed;

  const SocialLoginButton({
    Key? key,
    required this.text,
    required this.color,
    required this.logo,
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: color,
        onPrimary: Colors.white,
        minimumSize: Size(double.infinity, 50),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
      onPressed: onPressed,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            logo,
            height: 24,
            width: 24,
          ),
          SizedBox(width: 12),
          Text(
            text,
            style: TextStyle(
              fontSize: 16,
            ),
          ),
        ],
      ),
    );
  }
}

class GoogleLoginButton extends StatelessWidget {
  final VoidCallback onPressed;

  const GoogleLoginButton({Key? key, required this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SocialLoginButton(
      text: "Continue with Google",
      color: Colors.white,
      logo: 'assets/google_logo.png',  // Add your Google logo image in assets
      onPressed: onPressed,
    );
  }
}

class FacebookLoginButton extends StatelessWidget {
  final VoidCallback onPressed;

  const FacebookLoginButton({Key? key, required this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SocialLoginButton(
      text: "Continue with Facebook",
      color: Color(0xFF3b5998),
      logo: 'assets/facebook_logo.png',  // Add your Facebook logo image in assets
      onPressed: onPressed,
    );
  }
}

class AppleLoginButton extends StatelessWidget {
  final VoidCallback onPressed;

  const AppleLoginButton({Key? key, required this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SocialLoginButton(
      text: "Continue with Apple",
      color: Colors.black,
      logo: 'assets/apple_logo.png',  // Add your Apple logo image in assets
      onPressed: onPressed,
    );
  }
}

Step 4: Add Logo Images to Assets

You need to add the logos for Google, Facebook, and Apple to your assets directory. Create an assets directory in the root of your project and add the logo images.

1. Create the directory: mkdir assets
2. Add your logo images (e.g., google_logo.png, facebook_logo.png, apple_logo.png) to the assets directory.
3. Update your pubspec.yaml to include assets: flutter: assets: - assets/google_logo.png - assets/facebook_logo.png - assets/apple_logo.png

Step 5: Use the Buttons in Your App

In your main.dart file, use these custom buttons:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Social Login Buttons"),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              GoogleLoginButton(
                onPressed: () {
                  // Handle Google login
                  print("Google login pressed");
                },
              ),
              SizedBox(height: 16),
              FacebookLoginButton(
                onPressed: () {
                  // Handle Facebook login
                  print("Facebook login pressed");
                },
              ),
              SizedBox(height: 16),
              AppleLoginButton(
                onPressed: () {
                  // Handle Apple login
                  print("Apple login pressed");
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Step 6: Run Your App

Run your app to see the custom social login buttons in action.

flutter run

Customizations

• Text and Logo: You can change the text and logo images according to your needs.
• Colors: Modify the color parameter in each button widget to change the button colors.
• Button Style: Adjust the ElevatedButton.styleFrom properties to customize the button’s appearance further.

This guide helps you create custom social login buttons without using external packages, allowing you to have full control over the design.

Output

Here is the image of the custom social login buttons for Google, Facebook, and Apple as described in the code.

Related Articles

• How to make Ludo app in Flutter with Source Code Step by step
• How to make PDF Reader app in Flutter with Source Code Step by step
• How to make QR Scanner app in Flutter with Source Code Step by step
• How to Make a ToDo App with Flutter with source Code StepWise in 2024
• What is package in Flutter (Dart) with example in 2024
• What is class in Flutter(Dart) with example step by step
• Advantage of Flutter with examples in 2024
• Top 15 Amazing Applications Built with Flutter Framework
• Specialized PDF reader designed specifically for music sheets
• Flutter File Integrity Checker app for checking integrity of a file
• Christmas Quote Generator app built with flutter source code
• Create fast food orders and bundle it up into a QR code with flutter