Καταπληκτικό πακέτο για κουμπιά σύνδεσης Flutter

Όλοι γνωρίζουμε ότι η πιο πρόσφατη τάση είναι να ζητάμε από τους χρήστες να συνδεθούν ή να εγγραφούν χρησιμοποιώντας τους λογαριασμούς τους στα μέσα κοινωνικής δικτύωσης για ενσωμάτωση. Ως αποτέλεσμα, οι χρήστες μπορούν εύκολα να δημιουργήσουν / εγγραφούν λογαριασμούς και να μην χρειάζεται να θυμούνται κωδικούς πρόσβασης. Θα μάθουμε πώς να δημιουργείτε λογαριασμούς μέσων κοινωνικής δικτύωσης με κουμπιά σύνδεσης με flutter σε αυτό το σεμινάριο.

Σχετικά με το πακέτο flutter_signin_button

Μια προσθήκη Flutter που δημιουργεί κουμπιά σύνδεσης για διάφορους λογαριασμούς κοινωνικών μέσων τόσο σε Android όσο και σε iOS. Με αυτό το πακέτο, μπορούμε να κατασκευάσουμε κουμπιά κοινωνικών μέσων για Email, Google, Facebook, GitHub, Apple, LinkedIn, Pinterest, Tumblr, Twitter, Reddit, Quora, Yahoo, Hotmail, Xbox και Microsoft.

Προσθήκη εξάρτησης

Πρέπει να προσθέσουμε το flutter_signin_button πακετάρετε στο pubspec.yaml και εκτελέστε την εντολή pub get για να τη μεταφέρετε στο έργο μας flutter.

dependencies:
  ...
  flutter_signin_button: ^2.0.0

Πακέτο εισαγωγής

Μπορούμε να χρησιμοποιήσουμε τις κλάσεις και τις συναρτήσεις του πακέτου εισάγοντάς το στο έργο μας flutter αφού εγκατασταθεί.

import 'package:flutter_signin_button/flutter_signin_button.dart';

Ενσωματωμένα κουμπιά

Η τάξη ‚SignInButton‚ έχει ήδη μερικά κουμπιά που χρησιμοποιούνται συνήθως.
Εάν απαιτούνται περισσότερα κουμπιά, μπορούμε πάντα να χρησιμοποιήσουμε το ‚SignInButtonBuilder‚ για να δημιουργήσετε το κουμπί σύνδεσης.

  SignInButton(
    this.button, {
    required this.onPressed,
    this.mini = false,
    this.padding = const EdgeInsets.all(0),
    this.shape,
    this.text,
    this.elevation = 2.0,
  })

Το παραπάνω απόσπασμα είναι ο κατασκευαστής του SignInButton. Τώρα θα δούμε τις παραμέτρους του SignInButton μία προς μία.

Κουμπί κουμπιών: Η κλάση enum ‚Buttons‘ θα πρέπει να χρησιμοποιείται για κουμπιά. Αυτή η παράμετρος σάς επιτρέπει να επιλέξετε τον τύπο λογαριασμού μέσων κοινωνικής δικτύωσης που θέλετε να χρησιμοποιήσετε. Για παράδειγμα, εάν ο τύπος κουμπιού έχει ρυθμιστεί σε Κουμπιά.Facebookθα δημιουργηθεί το κουμπί Facebook.

 SignInButton(
            Buttons.Facebook,
            mini: false,
            onPressed: () {},
          )

Παραγωγή:

Flutter Κουμπιά σύνδεσης — Facebook-Button

Λειτουργία onPressed: Η συνάρτηση onPressed πρέπει να καθοριστεί ως υποχρεωτικό πεδίο. Μέσα σε αυτή τη συνάρτηση, μπορούμε να γράψουμε τη λογική για υπογραφή και εγγραφή. Όταν ο χρήστης πατήσει το κουμπί, θα ενεργοποιηθεί.

 SignInButton(
            Buttons.Facebook,
            mini: false,
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (context) => HomePage()));
            },
          )

bool mini: Το mini είναι ένα boolean πεδίο που υποδεικνύει εάν πρέπει να χρησιμοποιηθεί ένα τετράγωνο μίνι κουμπί. Το μικρό κουμπί θα ενεργοποιηθεί εάν η τιμή οριστεί σε true. False είναι η προεπιλεγμένη τιμή.

SignInButton(
            Buttons.Facebook,
            mini: true,
          )

Παραγωγή:

ShapeBorder; σχήμα: Το σχήμα χρησιμοποιείται για τον καθορισμό του προσαρμοσμένου σχήματος του γραφικού στοιχείου.

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

Παραγωγή:

Σειρά? κείμενο: Αυτή η ιδιότητα μας επιτρέπει να δώσουμε το προσαρμοσμένο κείμενο στο κουμπί. Αντί να χρησιμοποιήσετε την προεπιλεγμένη συμβολοσειρά.

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

Παραγωγή:

Επένδυση EdgeInsets: Αυτή η ιδιότητα μας δίνει τη δυνατότητα να παρέχουμε το γέμισμα κουμπιών.

  SignInButton(
            Buttons.Facebook,
            padding: const EdgeInsets.all(8.0),
            onPressed: () {
            },
          )

διπλό υψόμετρο: Αυτή η ιδιότητα μας επιτρέπει να δώσουμε την ανύψωση στο κουμπί

  SignInButton(
            Buttons.Facebook,
            elevation: 12.0,
            onPressed: () {
            },
          )

Παραγωγή:

Κουμπιά αυτοκατασκευής

Χωρίς τη χρήση των ενσωματωμένων κουμπιών, μπορούμε να δημιουργήσουμε προσαρμοσμένα κουμπιά παρέχοντας τις βασικές παραμέτρους. ο SignInButtonBuilder(..) Η κλάση χρησιμοποιείται για τη δημιουργία προσαρμοσμένων κουμπιών.

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,
  });

Το παραπάνω απόσπασμα είναι ο κατασκευαστής του SignInButtonBuilder(..) τάξη. Το SignInButtonBuilder(…) χρησιμοποιείται για τη δημιουργία ενός κουμπιού email στα παρακάτω παραδείγματα.

SignInButtonBuilder(
            text: 'Get going with Email',
            icon: Icons.email,
            onPressed: () {
              _showButtonPressDialog(context, 'Email');
            },
            backgroundColor: Colors.blueGrey[700]!,
            width: 220.0,
          ),

Παραγωγή:

Έτσι, μπορούμε να προσαρμόσουμε το κουμπί παρακάμπτοντας τα απαιτούμενα χαρακτηριστικά στο SignInButtonBuilder().

Τώρα που καταλαβαίνουμε καλύτερα το κουμπί σύνδεσης με το φτερούγισμα, ας συνδυάσουμε όλα τα κουμπιά σε μια σελίδα για καλύτερη κατανόηση.

Flutter Κουμπιά σύνδεσης Παράδειγμα

Δημιουργήστε ένα νέο έργο flutter και αφαιρέστε τον κωδικό του boilerplate και προσθέστε τον ακόλουθο κώδικα και εκτελέστε την εφαρμογή.

// Flutter Sign-in buttons - FlutterAnt

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 - FlutterAnt
 
  @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 - FlutterAnt
  @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 - FlutterAnt
 
          ),
          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,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

// Flutter Sign-in buttons - FlutterAnt

Εάν η εφαρμογή εκτελεστεί με επιτυχία, η έξοδος θα είναι όπως φαίνεται στην παρακάτω εικόνα.