Lepršanje: Kako se prijaviti korisnik s Firebaseom

puštanje

25/12/18 - Ažurirani najnoviji isječak koda nakon ponovnog faktoriranja i čišćenja.

24/01/19 - Duplirana veza na github na vrhu članka.

23/07/19 - Dodana metoda trimanja za vrijednost e-pošte i zaporke

Izvorni kod

U slučaju da želite preskočiti cijeli mumbo jumbo, ovdje možete zgrabiti izvorni kod

https://github.com/tattwei46/flutter_login_demo

Ažuriraj

Slijedi nastavak ovog posta koji glasi Kako napraviti CRUD s Firebase RTDB-om. Provjerite!

Što je Flutter?

Flutter je mobilni SDK otvorenog koda koji je razvio Google za izradu visokokvalitetnih aplikacija za Android i iOS. To omogućava programerima da ne samo grade aplikaciju s prekrasnim dizajnom, glatkom animacijom i brzim performansama, već i da mogu brzo integrirati nove značajke. Flutter nudi razvoj velike brzine uz izvanredno vruće ponovno učitavanje i vruće ponovno pokretanje. Sa samo jednom bazom kodova za upravljanje možete uštedjeti mnogo troškova u usporedbi s upravljanjem i Android i iOS projektima dok ih Flutter kompilira u izvorni ARM kôd. Flutter koristi programski jezik Dart koji je također razvio Google.

Zašto Dart?

  • Terziran, snažno tipkan, objektno orijentiran jezik.
  • Podržava sastavljanje pravovremene i unaprijed.
  • JIT omogućava lepršavom prekompiranju koda izravno na uređaju dok aplikacija i dalje radi.
  • Omogućuju brz razvoj i omogućuju stabilno ponovno punjenje vruće u sekundi.
  • AOT omogućava da se kôd sastavi izravno u izvorni ARM kôd što dovodi do brzog pokretanja i predvidljivih performansi.

Što je Firebase

Firebase je mobilna i web-platforma za razvoj koja programeru pruža široku paletu proizvoda. Danas ćemo gledati kako izgraditi našu prvu aplikaciju za lepršanje s Firebase provjerom autentičnosti i baze podataka u stvarnom vremenu. Ova aplikacija omogućuje korisniku da se prijavi ili prijavi i izvede todo stavke CRUD s Firebase. U ovom ćemo se postu samo fokusirati na dio prijave i prijave korisnika.

Kako postaviti okruženje

  • Slijedite upute na ovoj vezi
  • Nabavite Flutter SDK
  • Pokrenite Flutter doktora da instalirate sve ovisnosti
lepršava doktorica
  • Pomoću naredbe u nastavku otvorite iOS simulator
open -a Simulator
  • Da biste otvorili Android emulator, pokrenite Android Studio> alati> AVD Manager i odaberite stvoriti virtualni uređaj.

Izgradnja Flutter App

Kompletan izvorni kôd možete dobiti na linku GitHub na dnu posta. Sljedeće pokazuje kako proizlazimo iz uzorka Flutter projekta do kompletiranja izvornog koda u GitHub-u.

Korak 1: Stvorite novi demo projekta za flutter prijavu za prijavu fluttera. Pokrenite simulator i pokrenite projekt koristeći lepršanje. Kao željeni IDE možete koristiti Android Studio ili VSCode. Koraci za konfiguriranje urednika ovdje.

lepršati trčati

Ako imate i Android emulator i iOS Simulator, pokrenite sljedeću naredbu da biste ih izvršili na oba.

lepršati trčati -d sve

Trebali biste vidjeti slične zaslone i na Android Emulatoru i iOS Simulatoru.

Lijevo: Android, desno: iOS
Ako vas zanima kako doći do snimaka zaslona na vašim simulatorima;
Za Android: Jednostavno kliknite ikonu fotoaparata s lijeve strane okna alata. Slika će biti spremljena na radnu površinu
Za iOS: [Opcija 1] Držite i pritisnite naredbu + pomak + 4. Pritisnite razmaknicu da promijenite pokazivač miša na ikonu fotoaparata. Usmjerite pokazivač na iOS simulator, kliknite za snimanje zaslona. Slika će biti spremljena na radnu površinu.

[Opcija 2] Odaberite Simulator i pritisnite naredbu + S. Hvala JerryZhou za dijeljenje ovih podataka.

Korak 2: Na main.dartu obrišite sav sadržaj i dodajte sljedeću ploču s pločicama u datoteku. Stvorit ćemo novu datoteku pod nazivom login_page.dart koja ima klasu LoginPage. Na vašem terminalu pritisnite tipku R da biste izvršili ponovno punjenje i na ekranu bi trebali vidjeti "Hello World".

Main.dart

import 'paket: lepršav / materijal.dart';
import 'login_signup_page.dart';

void main () => runApp (novi MyApp ());

klasa MyApp proširuje StatelessWidget {
  
  @override
  Sastavljanje widgeta (kontekst BuildContext) {
    vrati novi MaterialApp (
      naslov: 'Flutter Login Demo',
      tema: nova ThemeData (
        PrimarySwatch: Colors.blue,
      ),
      home: novi LoginSignUpPage ()
    );
  }
}

login_signup_page.dart

import 'paket: lepršav / materijal.dart';

klasa LoginSignUpPage proširuje StatelessWidget {

  @override
  Sastavljanje widgeta (kontekst BuildContext) {
    vrati novu skelu (
      appBar: novi AppBar (
        naslov: novi Tekst ("Flutter prijava",,
      ),
      karoserija: novi kontejner (
        dijete: novi tekst ("Pozdrav svijetu"),
      ),
    );
  }
}

Te Korak 3: Promjena iz stanja u stanje državljanstva.

login_signup_page.dart

import 'paket: lepršav / materijal.dart';

klasa LoginSignUpPage proširuje StatefulWidget {

  @override
  Država  createState () => nova _LoginSignUpPageState ();

}

klasa _LoginSignUpPageState proširuje stanje  {

  @override
  Sastavljanje widgeta (kontekst BuildContext) {
    vrati novu skelu (
      appBar: novi AppBar (
        naslov: novi Tekst ("Flutter prijava",,
      ),
      karoserija: novi kontejner (
        dijete: novi tekst ("Pozdrav svijetu"),
      ),
    );
  }
}

Korak 4: Unutar tijela skele, zamijenimo tekst Hello Word u obrazac, a unutar njega ćemo staviti ListView. ListView uzima niz widgeta. Svaku komponentu korisničkog sučelja ćemo preoblikovati u zasebni widget.

Kad god koristimo unos teksta, bolje je omotati ga oko ListView-a kako bi se spriječila greška pri prikazivanju meke tipkovnice zbog prepunih piksela.

login_signup_page.dart

@override
Sastavljanje widgeta (kontekst BuildContext) {
  _isIos = Tema.of (kontekst) .platform == TargetPlatform.iOS;
  vrati novu skelu (
      appBar: novi AppBar (
        naslov: novi Tekst ("Demontaža za prijavu lete"),
      ),
      tijelo: Stack (
        djeca:  [
          _showBody (),
          _showCircularProgress (),
        ],
      ));
}

Korak 5: Izrada svih komponenata korisničkog sučelja

Primijetite na tijelu skele, imamo widget Stack kao tijelo. U osnovi ono što želim učiniti je da pokažem korisniku kružni pokazatelj učitavanja, kada se pokreće bilo koja aktivnost prijave ili prijave. Da bismo to učinili, moramo prekrivati ​​CircularProgressIndicator (na sreću, Flutter već ima ovaj widget, pa da ga upotrebimo, jednostavno ga nazovimo) s našim glavnim izgledom widgeta (obrazac za prijavu / prijavu). To je funkcija Stack widgeta koja omogućava da se jedan widget preklapa na drugom widgetu. Da bismo kontrolirali hoće li se prikazati CircularProgressIndicator ili ne, provjeravamo na bool _isLoading je li se zaslon učitava ili ne.

Widget _showCircularProgress () {
  if (_isLoading) {
    centar za povratak (dijete: CircularProgressIndicator ());
  } povratni spremnik (visina: 0,0, širina: 0,0,);

}

Za logotip koristit ćemo herojski widget i uvesti sliku dodavanjem sljedećeg retka u vaš pubspec.yaml. Zatim pokrenite pakete za uvoz slike.

imovina:
  - imovina / flutter-icon.png

login_signup_page.dart

Widget _showLogo () {
  vrati novog heroja (
    oznaka: 'heroj',
    dijete: Padding (
      padding: EdgeInsets.fromLTRB (0,0, 70,0, 0,0, 0,0),
      dijete: CircleAvatar (
        backgroundColor: Colors.transparent,
        polumjer: 48,0,
        dijete: Image.asset ('imovina / flutter-icon.png'),
      ),
    ),
  );
}

[Ažuriraj] Prije toga koristimo widget fleksibilnog razmaka koristeći SizedBox koji uzima unos visine da bi imao vertikalni razmak između 2 widgeta. Sada samo jedan widget stavimo unutar widgeta za oblaganje i koristimo padding: EdgeInsets.fromLTRB () što znači s lijeve, gornje, desne i donje strane i unosimo vrijednost paddinga u ispravnom položaju u skladu s tim.

Slijedi polje za obradu teksta e-pošte i zaporke. Napomena za svako polje imamo validator i onSaved. Ova dva povratna poziva pokrenut će se kad se pozove form.validate () i form.save (). Tako, na primjer, ako se zove form.save (), vrijednost u tekstnom polju teksta kopira se u drugu lokalnu varijablu.

Također ćemo uvesti validator u naša polja kako bismo provjerili je li unos polja prazan, a zatim upozoriti korisnika crvenom bojom. Moramo stvoriti i varijable _email i _password za spremanje vrijednosti. Za lozinku smo postavili obsecureText: true za skrivanje korisničke lozinke.

Ažuriranje: Dodao sam metodu trimanja i vrijednosti e-pošte i zaporke za uklanjanje nenamjernih vodećih ili zaostalih razmaka.

Widget _showEmailInput () {
  povratak Padding (
    padding: const EdgeInsets.fromLTRB (0,0, 100,0, 0,0, 0,0),
    dijete: novo TextFormField (
      maxLines: 1,
      tipkovnicaType: TextInputType.emailAddress,
      autofokus: lažno,
      ukras: novi InputDecoration (
          hintText: 'E-pošta',
          ikona: nova ikona (
            Icons.mail,
            boja: boje.sive,
          )),
      validator: (vrijednost) => vrijednost.isIprazno? 'E-pošta ne može biti prazna': null,
      onSaved: (value) => _email = value.trim (),
    ),
  );
}

Widget _showPasswordInput () {
  povratak Padding (
    padding: const EdgeInsets.fromLTRB (0,0, 15,0, 0,0, 0,0),
    dijete: novo TextFormField (
      maxLines: 1,
      obscureText: istina,
      autofokus: lažno,
      ukras: novi InputDecoration (
          hintText: "Lozinka",
          ikona: nova ikona (
            Icons.lock,
            boja: boje.sive,
          )),
      validator: (vrijednost) => vrijednost.isIprazno? 'Zaporka ne može biti prazna': null,
      onSaved: (value) => _password = value.trim (),
    ),
  );
}

Zatim moramo dodati primarni gumb, ali on bi trebao moći prikazati ispravan tekst, ovisno o tome želi li se korisnik prijaviti za novi račun ili se prijaviti s postojećim računom. Da bismo to postigli, moramo stvoriti enum koji će pratiti je li obrazac za prijavu ili registraciju.

enum FormMode {LOGIN, SIGNUP}

Dodijelit ćemo metodu za funkciju povratnog poziva s gumbom. Za to ćemo stvoriti metodu zvanu _validateAndSubmit koja će se proslijediti i e-poštom i lozinkom za Firebase provjeru autentičnosti. Više o tome kasnije u ovom postu.

Widget _showPrimaryButton () {
  vrati novi Padding (
      padding: EdgeInsets.fromLTRB (0.0, 45.0, 0.0, 0.0),
      dijete: novi MaterialButton (
        nadmorska visina: 5,0,
        minimalna širina: 200,0,
        visina: 42,0,
        boja: Colors.blue,
        dijete: _formMode == FormMode.LOGIN
            ? novi tekst ("Prijava",
                stil: novi TextStyle (veličina fonta: 20,0, boja: boje.white))
            : novi tekst ("Stvori račun",
                stil: novi TextStyle (veličina fonta: 20,0, boja: boje.white)),
        onPress: _validateAndSubmit,
      ));
}

Sada moramo dodati sekundarni gumb kako bi korisnik mogao prelaziti između obrasca za prijavu i prijavu. Metodom onPress želimo prebaciti stanje forme između LOGIN i SIGNUP. Obavijest o sekundarnom gumbu, mi koristimo FlatButton umjesto RaisedButton kao i prethodni gumb za slanje. Razlog je ako imate 2 gumba i želite napraviti 1 prepoznatljiviji od ostalih, RaisedButton je pravi izbor jer trenutno privlači pažnju korisnika u usporedbi s FlatButton-om.

login_page.dart

Widget _showSecondaryButton () {
  vrati novi FlatButton (
    dijete: _formMode == FormMode.LOGIN
        ? novi tekst ("Stvori račun",
            stil: novi TextStyle (fontSize: 18.0, fontWeight: FontWeight.w300))
        : novi tekst ("Imate račun? Prijavite se",
            stil:
                novi TextStyle (fontSize: 18.0, fontWeight: FontWeight.w300)),
    onPress: _formMode == FormMode.LOGIN
        ? _changeFormToSignUp
        : _changeFormToLogin,
  );
}

U načinu prebacivanja načina obrasca, ključno je omotati ga oko setState jer trebamo reći Flutteru da ponovo prikaže zaslon s ažuriranom vrijednošću FormMode-a.

void _changeFormToSignUp () {
  _formKey.currentState.reset ();
  _errorMessage = "";
  setState (() {
    _formMode = FormMode.SIGNUP;
  });
}

void _changeFormToLogin () {
  _formKey.currentState.reset ();
  _errorMessage = "";
  setState (() {
    _formMode = FormMode.LOGIN;
  });
}

Zatim ćemo imati _showErrorMessage () koji poruku o pogrešci prosljeđuju korisniku s Firebase strane kada se pokušava prijaviti ili prijaviti. Ova bi poruka o pogrešci mogla biti poput "Već postoji korisnički račun". Stoga ćemo imati String _errorMessage za pohranu poruke o pogrešci Firebase.

Widget _showErrorMessage () {
  if (_errorMessage.length> 0 && _errorMessage! = null) {
    vrati novi tekst (
      _errorMessage,
      stil: TextStyle (
          veličina fonta: 13.0,
          boja: boje.red,
          visina: 1,0,
          fontWeight: FontWeight.w300),
    );
  } else {
    vrati novi spremnik (
      visina: 0,0,
    );
  }
}

Na kraju, aranžirajmo te pojedinačne komponente korisničkog sučelja i vratimo ga u naš ListView.

Widget _showBody () {
  vrati novi spremnik (
      padding: EdgeInsets.all (16.0),
      dijete: novi obrazac (
        ključ: _formKey,
        dijete: novi ListView (
          smanjiti omot: istina,
          djeca:  [
            _showLogo (),
            _showEmailInput (),
            _showPasswordInput (),
            _showPrimaryButton (),
            _showSecondaryButton (),
            _showErrorMessage (),
          ],
        ),
      ));
}
TextFormField validator na djelu

Te korak 6.: registrirajte novi projekt Firebase

Idite na https://console.firebase.google.com i registrirajte novi projekt.

Za android kliknite ikonu android. Unesite naziv vašeg paketa koji se može pronaći u android / app / src / main / AndroidManifest.xml

Preuzmite konfiguracijsku datoteku koja je google-services.json (Android).

Povucite google-services.json u mapu aplikacija u prikazu projekta

Trebamo dodati dodatak Google Services Gradle da bismo čitali google-services.json. U /android/app/build.gradle posljednjem retku datoteke dodajte sljedeće.

primijeni dodatak: 'com.google.gms.google-services'

U android / build.gradle, unutar oznake buildscript, dodajte novu ovisnost.

buildscript {
   spremišta {
      // ...
}
zavisnosti {
   // ...
   classpath 'com.google.gms: google-services: 3.2.1'
}

Za iOS otvorite ios / Runner.xcworkspace kako biste pokrenuli Xcode. Naziv paketa može se naći u identifikatoru paketa na prikazu Runner.

Preuzmite konfiguracijsku datoteku koja je GoogleService-info.plist (iOS).

Povucite GoogleService-info.plist u podmapu Runner unutar Runnera kao što je prikazano u nastavku.

Davni korak 7: Dodavanje ovisnosti u pubspec.yaml
Zatim moramo dodati publikaciju firebase_auth u pubspec.yaml. Da biste dobili najnoviji broj verzije, idite na https://pub.dartlang.org/ i potražite auth firebase.

firebase_auth: ^ 0.6.6

Korak 8: Uvoz Firebase Auth

import 'paket: firebase_auth / firebase_auth.dart';

Te korak 9.: Omogućite prijavu pomoću e-pošte i zaporke na Firebaseu

10. korak: prijavite se u Firebase

Firebase signInWithEmailAndPassword je metoda koja vraća buduću vrijednost. Stoga metoda treba čekati, a funkcija vanjskog omota mora imati asinhciju. Dakle, priložimo metode prijave i prijave sa pokušajem catch bloka. Ako je došlo do pogreške, naš blok za hvatanje trebao bi biti u mogućnosti snimiti poruku pogreške i prikazati je korisniku.

Postoji razlika u načinu na koji je stvarna poruka pohranjena u pogrešci koju je Firebase bacio. U IOS-u je poruka u e.details dok je za Android u e.message. Platformu možete lako provjeriti pomoću _isIos = Theme.of (kontekst) .platform == TargetPlatform.iOS i ona bi trebala biti unutar bilo koje metode widgeta za izgradnju jer mu treba kontekst.

_validateAndSubmit () async {
  setState (() {
    _errorMessage = "";
    _isLoading = istina;
  });
  if (_validateAndSave ()) {
    String userId = "";
    probaj {
      ako je (_formMode == FormMode.LOGIN) {
        userId = čekajte widget.auth.signIn (_email, _password);
        print ('Prijavljen: $ userId');
      } else {
        userId = čekajte widget.auth.signUp (_email, _password);
        ispis ('Prijavljeni korisnik: $ userId');
      }
      ako je (userId.length> 0 && userId! = null) {
        widget.onSignedIn ();
      }
    } catch (e) {
      ispis ('Pogreška: $ e');
      setState (() {
        _isLoading = lažno;
        ako je (_isIos) {
          _errorMessage = e.details;
        } else
          _errorMessage = e.message;
      });
    }
  }
}

Davni korak 11: Očistite polje obrasca kad prebacite tipku

Moramo dodati sljedeći redak i u _changeFormToSignUp i _changeFormToLogin za resetiranje polja obrasca svaki put kad korisnik prebaci između obrasca za prijavu i prijave.

formKey.currentState.reset ();

korak 12.: pokušajte prijaviti korisnika

Pokušajmo prijaviti korisnika unosom e-pošte i zaporke.

Ako naiđete na nešto slično u nastavku, to je zato što na kraju e-pošte postoji dodatni razmak
I / flutter (14294): Error PlatformException (iznimka, adresa e-pošte je loše oblikovana., Null)
Ako naiđete na nešto slično u nastavku, promijenite zaporku da bude dugačka najmanje 6 znakova.
I / flutter (14294): Error PlatformException (iznimka, zadana lozinka je neispravna. [Lozinka treba biti najmanje 6 znakova], null)

Konačno nakon uspjeha, trebali biste u svom terminalu moći vidjeti sljedeći redak. Slučajni niz je korisnički ID.

I / lepršanje (14294): Prijavljeni JSwpKsCFxPZHEqeuIO4axCsmWuP2

Slično tome, ako se pokušamo prijaviti s istim korisnikom na koji smo se prijavili, trebali bismo dobiti ovako nešto:

I / lepršanje (14294): prijavljen u JSwpKsCFxPZHEqeuIO4axCsmWuP2

TeDavni korak 13: implementirati klasu Auth

Stvorite novi datotečni poziv za provjeru autentičnosti.dart. Također ćemo implementirati apstraktnu klasu BaseAuth. Svrha ove apstraktne klase je da djeluje kao srednji sloj između naših komponenti korisničkog sučelja i stvarne klase implementacije koja ovisi o okviru koji odaberemo. U svakom slučaju, odlučili smo zamijeniti Firebase na nešto poput PostgreSQL-a, to onda neće utjecati na komponente UI-ja.

import 'dart: async';
import 'paket: firebase_auth / firebase_auth.dart';

apstraktna klasa BaseAuth {
  Budući  prijava (string string, string string);
  Budući  signup (String e-pošta, String lozinka);
  Budućnost  getCurrentUser ();
  Budući  znakOut ();
}

klasa Auth implementira BaseAuth {
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instanca;

  Budući  prijava (string e-pošte, niz lozinke) async {
    FirebaseUser korisnik = pričekajte _firebaseAuth.signInWithEmailAndPassword (e-pošta: e-pošta, lozinka: lozinka);
    vratiti user.uid;
  }

  Buduća  prijava (string e-pošte, niz lozinke) async {
    FirebaseUser korisnik = pričekajte _firebaseAuth.createUserWithEmailAndPassword (e-pošta: e-pošta, lozinka: lozinka);
    vratiti user.uid;
  }

  Budući  getCurrentUser () async {
    Korisnik FirebaseUser = pričekajte _firebaseAuth.currentUser ();
    vratiti user.uid;
  }

  Budući  signOut () async {
    return _firebaseAuth.signOut ();
  }
}

U login_page.dart

klasa LoginSignUpPage proširuje StatefulWidget {
LoginSignUpPage ({this.auth});
konačni BaseAuth auth;
@override
Država  createState () => nova _LoginPageState ();
}

U glavnom.dart

home: novi LoginSignUpPage (auth: novi Auth ())

Natrag u login_page.dart, omogućuje zamjenu našeg znakaInWithEmailAndPassword

String userId = čekajte widget.auth.signIn (_email, _password);
String userId = čekajte widget.auth.signUp (_email, _password);

Korak 14: korijen i dom s VoidCallbackom

Kreirajmo novi datotečni poziv home_page.dart. To će se prikazati praznim popisom obaveza nakon što se korisnik uspješno prijavi ili registrira. Kao i obično, implementiramo skele s AppBarom, ali ovaj put imat ćemo FlatButton unutar AppBara za funkciju odjave. Ova se odjava poziva metodom odjave Firebase unutar klase BaseAuth.

Moramo stvoriti i datotečni poziv root_page.dart. Ovo će zamijeniti dom: LoginSignUpPage (auth: novi Auth ()) u našem glavnom.dartu.

home: nova RootPage (auth: nova Auth ())

Kada se aplikacija pokrene, trebala bi se otvoriti na ovoj stranici. Ova stranica djeluje kao upravitelj radi provjere valjanog ID-a Firebase-a i usmjerava ih na odgovarajuću stranicu. Na primjer, ako je prisutan korisnički ID, znači korisnik je već prijavljen i korisniku bi trebala biti prikazana početna stranica umjesto login_signup_page. To će biti učinjeno unutar initState, što je funkcija koja će se prvi izvršiti u datoteci.

U root_page, bit će 2 metode, a to su _onLoggedIn i _onSignedOut. U _onLoggedIn pokušavamo doći do korisničkog ID-a i setstate authStatus za korisnika je već prijavljen. U _onSignedOut brišemo pohranjeni korisnički ID i postavljamo authStatus da korisnik nije prijavljen.

U root_page prelazimo 2 parametra u login_page, jedan je klasa Auth koju implementiramo lakše (instanciramo je na main.dart) i metoda _onLoggedIn). Na stranici login_signup_page kreiramo 2 varijable koje su autori tipa BaseAuth i onSignedIn tipa VoidCallback. Jednostavno možemo dohvatiti 2 parametra prenesena u login_signup_page u naše lokalne varijable koristeći sljedeći redak.

LoginSignUpPage ({this.auth, this.onSignedIn});

konačni BaseAuth auth;
konačni VoidCallback onSignedIn;

VoidCallback omogućava login_signup_page da nazove metodu unutar root_page koja je _onSignedIn kad se korisnik prijavi. Kada se _onSignedIn zove, postavi će authStatus na LOGGED_IN i postavitiState da crta aplikaciju. Kada se aplikacija ponovo izradi, initState provjerava authStatus i budući da je LOGGED_IN, prikazat će početnu stranicu, prelazeći auth i voidcallback od _signOut.

root_page.dart

@override
Sastavljanje widgeta (kontekst BuildContext) {
  prebaciti (authStatus) {
    slučaj AuthStatus.NOT_DETERMINED:
      return _buildWaitingScreen ();
      pauza;
    slučaj AuthStatus.NOT_LOGGED_IN:
      vrati novi LoginSignUpPage (
        auth: widget.auth,
        onSignedIn: _onLoggedIn,
      );
      pauza;
    slučaj AuthStatus.LOGGED_IN:
      ako je (_userId.length> 0 && _userId! = null) {
        vrati novu početnu stranicu (
          userId: _userId,
          auth: widget.auth,
          onSignedOut: _onSignedOut,
        );
      } else return _buildWaitingScreen ();
      pauza;
    zadano:
      return _buildWaitingScreen ();
  }
}

Primijetite vrpcu za uklanjanje pogrešaka u gornjem desnom kutu aplikacije, lako ćete je ukloniti dodavanjem sljedećeg retka unutar MaterialApp widgeta u main.dart

Demo zaslon za prijavu
debugShowCheckedModeBanner: false,
Baner za uklanjanje pogrešaka uklonjen

Kompletan izvorni kôd možete dobiti na linku github u nastavku

Ako smatrate da je ovaj članak koristan, navedite nekoliko

Referenca:

Flutter Pub srednja je publikacija koja će vam donijeti najnovije i zadivljujuće resurse poput članaka, videozapisa, kodova, podcasta itd. O ovoj izvrsnoj tehnologiji kako bi vas naučila kako s njom graditi prekrasne aplikacije. Možete nas pronaći na Facebooku, Twitteru i Medijumu ili saznati više o nama ovdje. Voljeli bismo se povezati! A ako ste pisac zainteresiran za pisanje za nas, to možete učiniti kroz ove smjernice.