flutter_signin_button – Thêm button đăng nhập mạng xã hội đẹp trong Flutter

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.

flutter_signin_button - Thêm button đăng nhập mạng xã hội đẹp trong Flutter
flutter_signin_button – Thêm button đăng nhập mạng xã hội đẹp trong Flutter

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.0

Import 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

Nút Facebook
Nút Facebook

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

facebook min flutter

ShapeBorder? shape: Thay đổi hình dạng của nút

SignInButton(
            Buttons.Facebook,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16
                )),
            onPressed: () {
            },
          )

Output

facebook shape flutter

String? text: Thay đổi chữ

SignInButton(
            Buttons.Facebook,
            text: "Login with Facebook",
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16
                )),
            onPressed: () {
            },
          )

Output

button custom text flutter

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

flutter sign in elevation

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

flutter signinbutton custom button

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

flutter sign in demo

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

5 2 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest

0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x