Preview:
import 'package:flutter/material.dart';
import 'package:pets_home/utils.dart';

class CustomSignInButton extends StatelessWidget {
  final String imagePath;
  final String text;
  final VoidCallback onTap;

  const CustomSignInButton({
    Key? key,
    required this.imagePath,
    required this.text,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: double.infinity,
        margin: EdgeInsets.symmetric(horizontal: calculateWidth(31)),
        padding: EdgeInsets.symmetric(horizontal: 0, vertical: calculateHeight(8)),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(32), // Rounded corners
          border: Border.all(
            color: primaryColor, // Border color
            width: 2, // Border width
          ),
        ),
        child: Padding(
          padding: EdgeInsets.only(left: calculateWidth(54)),
          child: Row(
            mainAxisSize: MainAxisSize.min, // Adjusts based on content
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Image.asset(
                imagePath,
                height: calculateHeight(50), // Size of the image
                width: calculateHeight(50),
              ),
              const SizedBox(width: 12), // Spacing between image and text
              Text(
                text,
                style: const TextStyle(
                  color: Colors.brown, // Text color
                  fontSize: 16, // Font size
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}



//call

     Column(
            children: [
              SizedBox(height: calculateHeight(29)),
              CustomSignInButton(
                imagePath: 'assets/google_icon.png', // Google logo path
                text: 'Sign in using Google',
                onTap: () {
                  print('Google Sign-in button tapped');
                  // Google login logic here
                },
              ),
              const SizedBox(height: 16), // Space between buttons
              CustomSignInButton(
                imagePath: 'assets/facebook_icon.png', // Facebook logo path
                text: 'Sign in using Facebook',
                onTap: () {
                  print('Facebook Sign-in button tapped');
                  // Facebook login logic here
                },
              ),
              const SizedBox(height: 16), // Space between buttons
              CustomSignInButton(
                imagePath: 'assets/apple_icon.png', // Apple logo path
                text: 'Sign in using Apple',
                onTap: () {
                  print('Apple Sign-in button tapped');
                  // Apple login logic here
                },
              ),
            ],
          ) 
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter