Bài viết này xin giới thiệu đến các bạn package flutter_signin_button giúp chúng ta thêm button đăng nhập các mạng xã hội đẹp và nhanh làm ứng dụng có phần đăng nhập.
Như chúng ta đều biết hiện nay người dùng ứng dụng thường sử dụng tính năng đăng nhập bằng các mạng xã hội. Điều này giúp người dùng nhanh chóng đăng ký tài khoản ứng dụng và có thể cập nhật thông tin sau này.
Và cách làm button đăng nhập này cũng không quá khó nhưng với package flutter_signin_button này thì bạn có thể nhanh chóng có được bộ button đăng ký, đăng nhập bằng mạng xã hội nhanh, đẹp và đồng bộ với nhau.
Thông tin package flutter_signin_button
Đây là package tạo nút đăng nhập với các mạng xã hội thông dụng như Email, Google, Facebook, GitHub, Apple, LinkedIn, Pinterest, Tumblr, Twitter, Reddit, Quora, Yahoo, Hotmail, Xbox, and Microsoft.
Adding dependency
Chúng ta cần thêm package flutter_signin_button cần thêm vào file pubspec.yaml và chạy command pub get trong project
dependencies:
...
flutter_signin_button: ^2.0.0Import Package
Để sử dụng class và method của package này chúng ta cần import class chính vào
import 'package:flutter_signin_button/flutter_signin_button.dart';Cách dùng
Package này có sẳn class SignInButton với những kiểu nút hay dùng. Nhưng nếu bạn muốn custom thêm các nút cần thì bạn có thể dùng SignInButtonBuilder để tạo theo ý của bạn.
SignInButton(
this.button, {
required this.onPressed,
this.mini = false,
this.padding = const EdgeInsets.all(0),
this.shape,
this.text,
this.elevation = 2.0,
}) Chúng ta cùng xem các tham số của Widget SignInButton
this.button: Bạn có thể dùng class Button để chọn loại Button mà bạn muốn tạo. Ví dụ muốn tạo nút đăng nhập Facebook thì bạn dùng Buttons.Facebook
SignInButton(
Buttons.Facebook,
mini: false,
onPressed: () {},
)Output
onPressed: Hàm xử lý logic khi người dùng nhấn vào button
SignInButton(
Buttons.Facebook,
mini: false,
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => HomePage()));
},
)bool mini: là trường chỉ định nút là nút nhỏ hình vuông chỉ có icon hay là nút với đầy đủ icon và chữ
SignInButton(
Buttons.Facebook,
mini: true,
)Output
ShapeBorder? shape: Thay đổi hình dạng của nút
SignInButton(
Buttons.Facebook,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16
)),
onPressed: () {
},
)Output
String? text: Thay đổi chữ
SignInButton(
Buttons.Facebook,
text: "Login with Facebook",
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16
)),
onPressed: () {
},
)Output
EdgeInsets padding: Chỉnh sửa padding của button
SignInButton(
Buttons.Facebook,
padding: const EdgeInsets.all(8.0),
onPressed: () {
},
)double elevation: Thêm độ cao cho nút(sẽ có bóng phía dưới)
SignInButton(
Buttons.Facebook,
elevation: 12.0,
onPressed: () {
},
)Output
Tự tạo button bằng SignInButtonBuilder
Nếu không muốn sử dụng các nút có sẳn có thể dùng class SignInButtonBuilder để tạo theo ý mình. Các tham số tương tự với cách dùng SignInButton
SignInButtonBuilder({
Key? key,
required this.backgroundColor,
required this.onPressed,
required this.text,
this.icon,
this.image,
this.fontSize = 14.0,
this.textColor = Colors.white,
this.iconColor = Colors.white,
this.splashColor = Colors.white30,
this.highlightColor = Colors.white30,
this.padding,
this.innerPadding,
this.mini = false,
this.elevation = 2.0,
this.shape,
this.height,
this.width,
});Ví dụ mình muốn tạo một nút đăng nhập bằng Email thì cần tạo như sau
SignInButtonBuilder(
text: 'Get going with Email',
icon: Icons.email,
onPressed: () {
_showButtonPressDialog(context, 'Email');
},
backgroundColor: Colors.blueGrey[700]!,
width: 220.0,
),Output
Ví dụ sử dụng nút đăng nhập
import 'package:flutter/material.dart';
import 'package:flutter_signin_button/flutter_signin_button.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// Flutter Sign-in buttons - 1kho
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.light(),
home: Scaffold(
body: SignInPage(),
),
debugShowCheckedModeBanner: false,
);
}
}
class SignInPage extends StatelessWidget {
// Flutter Sign-in buttons - 1kho
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SignInButton(
Buttons.Google,
onPressed: () {
},
),
Divider(),
SignInButton(
Buttons.GoogleDark,
onPressed: () {
},
),
Divider(),
SignInButton(
Buttons.FacebookNew,
onPressed: () {
},
),
Divider(),
SignInButton(
Buttons.Apple,
onPressed: () {
},
),
Divider(),
SignInButton(
Buttons.GitHub,
text: "Sign up with GitHub",
onPressed: () {
},
// Flutter Sign-in buttons - 1kho
),
Divider(),
SignInButton(
Buttons.Microsoft,
text: "Sign up with Microsoft ",
onPressed: () {
},
),
Divider(),
SignInButton(
Buttons.Twitter,
text: "Use Twitter",
onPressed: () {
},
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SignInButton(
Buttons.LinkedIn,
mini: true,
onPressed: () {
},
),
SignInButton(
Buttons.Tumblr,
mini: true,
onPressed: () {
},
),
SignInButton(
Buttons.Facebook,
mini: true,
onPressed: () {
},
),
SignInButtonBuilder(
icon: Icons.email,
text: "Ignored for mini button",
mini: true,
onPressed: () {
},
backgroundColor: Colors.cyan,
),
],
),
],
),
);
}
}Nếu chạy thành công thì kết quả sẽ như sau
Một số từ khóa bằng tiếng Anh để các bạn có thể tìm hiểu thêm như “flutter signin button“, “flutter_signin_button“, “Flutter sign in buttons“, “Google login button Flutter“, “flutter single sign-on“.
Nếu bạn muốn học Lập trình Flutter cơ bản có thể xem qua Lập trình Flutter cơ bản trên 1kho.info. Và theo dõi Fanpage 1Kho.info để theo dõi những bài mới nhất https://www.facebook.com/1kho.info