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 }, ), ], )
Preview:
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