Aug

Flutter Authentication Buttons

Flutter Authentication Buttons:

We all know that every social network has its own login button or icon represents its branding. In this tutorial, we are going to learn the Flutter Authenticating button widget library containing popular social networks such as Google, Facebook, Twitter, and Microsoft.

Follow the below steps to create Flutter Authenticating Buttons.

Add the dependency package:

adding the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
flutter_auth_buttons: ^0.5.0

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter pub get

Importing the Package:

After Adding the dependency package to the pubspec.yaml file , you can now import the package into the dart code by using the below code. without adding the dependency packge to the pubspec.yaml file if you import it will show package not found an error.

import 'package:flutter_auth_buttons/flutter_auth_buttons.dart';

Facebook Sign in Button:

Use the below code to capture the button press and call your authentication logic
for FacebooksignIn within that. To disable the button, pass null or omit the attribute.

FacebookSignInButton(onPressed: () {
// call authentication logic
});

GoogleSignInButton with Dark mode:

Use the below sample example code to create google sign in button with dark mode.

GoogleSignInButton(
onPressed: () {/* ... */},
darkMode: true, // default: false
)

Creating TwitterSignInButton with border radius:

Use the below sample example code to create TwitterSignInButton with border radius functionality.

TwitterSignInButton(
onPressed: () {},
borderRadius: 10.0,
)

Complete Example for creating Social Authentication buttons in flutter App.

main.dart

copy and paste the below code into your main dart file.

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

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Button Demo',
home: Scaffold(
appBar: AppBar(
title: Text("flutter_auth_buttons"),
),
backgroundColor: Color.fromARGB(0xFF, 0xF0, 0xF0, 0xF0),
body: Center(
child: Column(
children: [
Heading("Natural size"),
Column(
children: [
GoogleSignInButton(onPressed: () {}),
GoogleSignInButton(onPressed: () {}, darkMode: true),
FacebookSignInButton(onPressed: () {}),
TwitterSignInButton(onPressed: () {}),
MicrosoftSignInButton(onPressed: () {}),
MicrosoftSignInButton(onPressed: () {}, darkMode: true),
],
),
SizedBox(height: 25.0),
Heading("Stretched (by parent)"),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
GoogleSignInButton(onPressed: () {}),
GoogleSignInButton(onPressed: () {}, darkMode: true),
FacebookSignInButton(onPressed: () {}),
TwitterSignInButton(onPressed: () {}),
MicrosoftSignInButton(onPressed: () {}),
MicrosoftSignInButton(onPressed: () {}, darkMode: true),
],
),
),
],
),
),
),
);
}
}

class Heading extends StatelessWidget {
final String text;

Heading(this.text);

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 12.0, bottom: 12.0),
child: Text(
text,
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
);
}
}

Congratulations You Have Learned Creating Social Authenticating Buttons in Flutter….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext