Lärm: Kuidas Firebase'i abil kasutajat sisse logida?

Vabastage

25/12/18 - värskendatud uusim koodilõik pärast refaktorit ja puhastamist.

24/01/19 - artikli ülaosas dubleeritud link githubile.

23/07/19 - lisatud e-posti aadressi ja parooli väärtusele trimmimismeetod

Lähtekood

Juhul kui soovite kogu mumbo hüppamise vahele jätta, võite siit haarata lähtekoodi

https://github.com/tattwei46/flutter_login_demo

Uuenda

Siin on järg sellele postitusele, mis on Kuidas teha CRUDi Firebase RTDB-ga. Vaata järgi!

Mis on laperdus?

Flutter on avatud lähtekoodiga mobiilne SDK, mille on välja töötanud Google, et luua kvaliteetseid rakendusi Androidi ja iOS-i jaoks. See võimaldab arendajatel mitte ainult ehitada rakendusi kauni kujunduse, sujuva animatsiooni ja kiire jõudlusega, vaid ka uusi funktsioone kiiresti integreerida. Flutter pakub kiire oleku arendamist oma olekliku kuuma uuesti laadimise ja kuuma taaskäivitamisega. Ainult ühe hallatava koodialuse korral saate säästa palju kulusid, võrreldes nii Androidi kui ka iOS-i projektide haldamisega, kuna Flutter kompileerib selle omapärasesse ARM-koodi. Flutter kasutab Darti programmeerimiskeelt, mille on välja töötanud ka Google.

Miks Dart?

  • Lühike, tugevalt trükitud, objektorienteeritud keel.
  • Toetab õigel ajal ja enne tähtaegade koostamist.
  • JIT võimaldab lehvitada koodi otse seadmes uuesti seadistamist rakenduse töötamise ajal.
  • Luba kiire arendamine ja võimaldab sekundi jooksul stabiilset kuuma uuesti laadimist.
  • AOT võimaldab koodi kompileerida otse loomulikusse ARM-koodi, mis viib kiire käivitamise ja prognoositava jõudluse.

Mis on Firebase?

Firebase on mobiil- ja veebiarendusplatvorm, mis pakub arendajale laia tootevalikut. Täna otsime, kuidas ehitada oma esimene laperdusrakendus koos Firebase autentimise ja reaalajas andmebaasiga. See rakendus võimaldab kasutajal registreeruda või sisse logida ja teha üksusi CRUD Firebase'iga. Sellel postitusel keskendume ainult kasutaja registreerumisele ja sisselogimise osale.

Kuidas seadistada keskkonda

  • Järgige selle lingi juhiseid
  • Hankige Flutter SDK
  • Kõigi sõltuvuste installimiseks käivitage Flutteri arst
laperdusarst
  • IOS-i simulaatori avamiseks kasutage allolevat käsku
avatud - simulaator
  • Androidi emulaatori avamiseks käivitage Android Studio> tööriistad> AVD Manager ja valige Loo virtuaalne seade.

Ehituse laperdusrakendus

Täieliku lähtekoodi saate postituse allosas oleval lingil GitHub. Alljärgnev näitab, kuidas tuletame Flutteri näidisprojektist lähtekoodi täielikuks täiendamiseks GitHubis.

TeSamm 1: looge uus lendkõne projektikõne flutteri sisselogimise demo. Käivitage simulaator ja käivitage projekt lehitsemise abil. Eelistatud IDE-na saate kasutada kas Android Studio või VSCode. Siin saate redigeerija konfigureerida.

laperdus jooksma

Kui teil töötab nii Androidi emulaator kui ka iOS-i simulaator, käivitage mõlemal käitamiseks järgmine käsk.

laperdus kestab kõik

Sarnaseid ekraane peaksite nägema nii Android-emulaatoris kui ka iOS-i simulaatoris.

Vasakul: Android, paremal: iOS
Kui soovite teada, kuidas simulaatorites ekraanipilte saada;
Android: klõpsake lihtsalt kaamera ikooni tööriistaribal vasakul küljel. Pilt salvestatakse töölauale
IOS-i puhul: [Valik 1] hoidke all ja vajutage käsku + shift + 4. Vajutage tühikuklahvi, et muuta hiirekursor kaamera ikooniks. Osutage iOS-i simulaatorile ja klõpsake ekraanipildi tegemiseks. Pilt salvestatakse töölauale.

[Valik 2] Valige Simulaator ja vajutage käsku + S. Täname JerryZhou selle teabe jagamise eest.

2. samm: kustutage saidil main.dart kogu sisu ja lisage oma faili järgmine katteplaat. Me loome uue faili nimega login_page.dart, millel on LoginPage klass. Kuuma uuesti laadimiseks vajutage oma terminalis R-klahvi ja peaksite ekraanil nägema „Tere maailm“.

Main.dart

import 'pakett: laperdus / materjal.dart';
impordi 'login_signup_page.dart';

tühine main () => runApp (uus MyApp ());

klass MyApp laiendab StatelessWidget {
  
  @ ületamine
  Vidina loomine (BuildContext kontekst) {
    tagastage uus MaterialApp (
      pealkiri: 'Flutter Login Demo',
      teema: uus ThemeData (
        PrimarySwatch: Colors.blue,
      ),
      kodu: uus LoginSignUpPage ()
    );
  }
}

login_signup_page.dart

import 'pakett: laperdus / materjal.dart';

klass LoginSignUpPage laiendab StatelessWidgetit {

  @ ületamine
  Vidina loomine (BuildContext kontekst) {
    tagasta uus telling (
      appBar: uus AppBar (
        pealkiri: uus tekst ("Flutter login demo"),
      ),
      kere: uus konteiner (
        laps: uus tekst ("Tere maailm"),
      ),
    );
  }
}

3. samm: muutumine kodakondsuseta olekust riiklikuks.

login_signup_page.dart

import 'pakett: laperdus / materjal.dart';

klass LoginSignUpPage laiendab rakendust StatefulWidget {

  @ ületamine
  Olek  createState () => uus _LoginSignUpPageState ();

}

klass _LoginSignUpPageState laiendab olekut  {

  @ ületamine
  Vidina loomine (BuildContext kontekst) {
    tagasta uus telling (
      appBar: uus AppBar (
        pealkiri: uus tekst ("Flutter login demo"),
      ),
      kere: uus konteiner (
        laps: uus tekst ("Tere maailm"),
      ),
    );
  }
}

Samm 4: Asendame Tellingute korpuses Hello Wordi teksti vormiks ja selle sisse paneme nimekirjavaate. ListView võtab hulga vidinaid. Reaktorime iga kasutajaliidese komponendi eraldi vidinaks.

Kui kasutame tekstisisestust, on parem mähkida see ListView ümber, et vältida renderdamisvigade tekkimist, kui pehme klaviatuur kuvatakse ülevoolu pikslite tõttu.

login_signup_page.dart

@ ületamine
Vidina loomine (BuildContext kontekst) {
  _isIos = Theme.of (kontekst) .platform == TargetPlatform.iOS;
  tagasta uus telling (
      appBar: uus AppBar (
        pealkiri: uus tekst ('Flutter login demo'),
      ),
      keha: korstnat (
        lapsed:  [
          _showBody (),
          _showCircularProgress (),
        ],
      ));
}

5. samm: kõigi kasutajaliidese komponentide loomine

Teade Tellingute kehas on meil kehana Stack-vidin. Põhimõtteliselt tahan ma näidata kasutajale ümmarguse laadimise indikaatorit, kui mõni sisselogimis- või registreerumistegevus toimub. Selleks peame CircularProgressIndicatori üle katma (õnneks on Flutteril see vidin juba olemas, nii et selle kasutamiseks lihtsalt helistage) meie peamise vidina paigutusega (sisselogimis- / registreerumisvorm). See on virna vidina funktsioon, mis võimaldab ühel vidinil teise vidina peal üle kaeda. Et kontrollida, kas CircularProgressIndicatorit kuvatakse või mitte, kontrollime sisselülitamisviisil _isLoading, kas ekraan laaditakse või mitte.

Vidin _showCircularProgress () {
  if (_isLoading) {
    tagasisaatmiskeskus (laps: CircularProgressIndicator ());
  } tagasikonteiner (kõrgus: 0,0, laius: 0,0,);

}

Logo jaoks kasutame kangelase vidinat ja ka pildi importimiseks, lisades teie pubspec.yaml järgmise rea. Seejärel käivitage oma pildi importimiseks hankepaketid.

varad:
  - varad / laperdus-icon.png

login_signup_page.dart

Vidin _showLogo () {
  naase uus kangelane (
    silt: 'kangelane',
    laps: polster (
      polster: EdgeInsets.fromLTRB (0,0, 70,0, 0,0, 0,0),
      laps: CircleAvatar (
        backgroundColor: värvid.läbipaistev,
        raadius: 48,0,
        laps: Image.asset ('varad / laperdus-ikoon.png'),
      ),
    ),
  );
}

[Värskendus] Varem kasutame SizedBoxi abil paindliku vahekaugusega vidinat, mis võtab kõrguse sisestamisel vertikaalse vahe kahe vidina vahel. Nüüd paneme lihtsalt ühe vidina polsterdusvidina sisse ja kasutame polsterdust: EdgeInsets.fromLTRB (), mis tähendab vasakult, ülalt, paremalt ja alt ning sisestage polsterduse väärtus vastavalt õiges asendis.

Järgmisena tuleb meie e-posti aadressi ja parooli teksti vorm. Teade iga välja kohta, millel meil on valideerija ja onSaved. Need 2 tagasihelistamist käivitatakse siis, kui kutsutakse vormid validate () ja form.save (). Nii näiteks kui kutsutakse vormi.save (), siis kopeeritakse teksti vormi väljal olev väärtus teise lokaalsesse muutujasse.

Tutvustame oma väljadele ka valideerijat, et kontrollida, kas välja sisend on tühi, ja seejärel näidata punasega kasutajale hoiatust. Väärtuste salvestamiseks peame looma ka muutujad _email ja _parool. Parooli jaoks seadsime kasutaja parooli peitmiseks obsecureText: true.

Värskendus: olen lisanud kärpimismeetodi nii e-posti kui ka parooli väärtusele, et eemaldada tahtmatud tühjad tühikud.

Vidin _showEmailInput () {
  tagastama polster (
    polster: const EdgeInsets.frLLB (0,0, 100,0, 0,0, 0,0),
    laps: uus TextFormField (
      max read: 1,
      keyboardType: TextInputType.emailAddress,
      autofookus: vale,
      teenetemärk: uus InputDecoration (
          hintText: 'Email',
          ikoon: uus ikoon (
            Ikoonid.mail,
            värv: Colors.grey,
          )),
      valideerija: (väärtus) => väärtus.is kas tühi? 'E-post ei saa tühi olla': null,
      onSaved: (väärtus) => _email = väärtus.trim (),
    ),
  );
}

Vidin _showPasswordInput () {
  tagastama polster (
    polster: const EdgeInsets.fromLTRB (0,0, 15,0, 0,0, 0,0),
    laps: uus TextFormField (
      max read: 1,
      obscureText: tõsi,
      autofookus: vale,
      teenetemärk: uus InputDecoration (
          hintText: 'Parool',
          ikoon: uus ikoon (
            Icons.lock,
            värv: Colors.grey,
          )),
      valideerija: (väärtus) => väärtus.is kas tühi? 'Parool ei saa olla tühi': null,
      onSaved: (väärtus) => parool = väärtus.trim (),
    ),
  );
}

Järgmisena peame lisama peamise nupu, kuid see peaks suutma kuvada õige teksti sõltuvalt sellest, kas kasutaja soovib registreeruda uuele kontole või olemasoleva kontoga sisse logida. Selleks peame looma enumuse, et jälgida, kas vorm on sisselogimiseks või registreerumiseks.

enum FormMode {LOGIN, SIGNUP}

Me määrame nupu tagasihelistamisfunktsiooni meetodi. Selleks loome meetodi nimega _validateAndSubmit, mis edastab Firebase'i autentimiseks nii e-posti kui ka parooli. Sellest lähemalt sellest postitusest hiljem.

Vidin _showPrimaryButton () {
  tagastage uus polster (
      polster: EdgeInsets.fromLTRB (0,0, 45,0, 0,0, 0,0),
      laps: uus MaterialButton (
        kõrgus: 5,0,
        minLaius: 200,0,
        kõrgus: 42,0,
        värv: värvid.sinine,
        laps: _formMode == FormMode.LOGIN
            ? uus tekst ('Logi sisse',
                stiil: uus TextStyle (fontSize: 20.0, värv: Colors.white))
            : uus tekst ('Loo konto',
                stiil: uus TextStyle (fontSize: 20.0, värv: Colors.white)),
        onPressed: _validateAndSubmit,
      ));
}

Nüüd peame lisama teisese nupu, et kasutaja saaks registreerumise ja sisselogimisvormi vahel vahetada. OnPressed meetodil tahame vormi oleku LOGIN ja SIGNUP vahel vahetada. Märkus sekundaarse nupu kohta. Me kasutame RaisedButtoni asemel FlatButtonit nagu eelmisel nupul. Põhjus on see, et kui teil on 2 nuppu ja soovite muuta ühe teistest eristatavamaks, on RaisedButton õige valik, kuna see tõmbab kasutaja tähelepanu FlatButtoniga koheselt.

login_page.dart

Vidin _showSecondaryButton () {
  tagasta uus FlatButton (
    laps: _formMode == FormMode.LOGIN
        ? uus tekst ('Loo konto',
            stiil: uus TextStyle (fontSize: 18.0, fontWeight: FontWeight.w300))
        : uus tekst ('Kas teil on konto? Logi sisse',
            stiil:
                uus TextStyle (fontSize: 18.0, fontWeight: FontWeight.w300)),
    onPressed: _formMode == FormMode.LOGIN
        ? _changeFormToSignUp
        : _changeFormToLogin,
  );
}

Vormirežiimi vahetamise meetodi puhul on ülioluline see ümber setState'i mähkida, kuna peame käskima Flutteril muuta ekraan uuesti FormMode'i värskendatud väärtusega.

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

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

Järgmisena on meil _showErrorMessage (), mis edastab tõrketeate kasutajale Firebase'i poolelt, kui nad proovivad sisselogimist või registreerumist. See tõrketeade võib olla umbes selline: „Juba on olemas kasutajakonto”. Nii et meil on Firebase'i tõrketeate salvestamiseks String _errorMessage.

Vidin _showErrorMessage () {
  if (_errorMessage.length> 0 && _errorMessage! = null) {
    tagasta uus tekst (
      _errorMessage,
      stiil: TextStyle (
          fontSize: 13,0,
          värv: värvid.punane,
          kõrgus: 1,0,
          fontWeight: FontWeight.w300),
    );
  } veel {
    tagastage uus konteiner (
      kõrgus: 0,0,
    );
  }
}

Lõpuks korraldame need üksikud kasutajaliidese komponendid ja pange see tagasi meie loendisse.

Vidin _showBody () {
  tagastage uus konteiner (
      polster: EdgeInsets.all (16.0),
      laps: uus vorm (
        võti: _formKey,
        laps: uus ListView (
          shrinkWrap: tõsi,
          lapsed:  [
            _showLogo (),
            _showEmailInput (),
            _showPasswordInput (),
            _showPrimaryButton (),
            _showSecondaryButton (),
            _showErrorMessage (),
          ],
        ),
      ));
}
TekstFormFieldi valideerija töötab

6. samm: registreerige uus projekt Firebase'is

Minge saidile https://console.firebase.google.com ja registreerige uus projekt.

Androidi jaoks klõpsake androidi ikooni. Sisestage oma paketi nimi, mille leiate kaustast android / app / src / main / AndroidManifest.xml

Laadige alla konfiguratsioonifail, mis on google-services.json (Android).

Lohistage google-services.json projektivaates rakenduse kausta

Google-services.json lugemiseks peame lisama pistikprogrammi Google Services Gradle. Lisage /android/app/build.gradle faili viimasele reale järgmine tekst.

rakenda pistikprogramm: 'com.google.gms.google-services'

Jaotises android / build.gradle lisage ehisscripti sildi sees uus sõltuvus.

ehituskiri {
   hoidlad {
      // ...
}
sõltuvused {
   // ...
   classpath 'com.google.gms: google-services: 3.2.1'
}

IOS-i jaoks avage Xcode käivitamiseks ios / Runner.xcworkspace. Paketi nime leiate komplekti identifikaatorist jooksja vaates.

Laadige alla konfiguratsioonifail, mis on GoogleService-info.plist (iOS).

Lohistage GoogleService-info.plist jooksja alamkausta Runner, nagu allpool näidatud.

Samm 7: lisage sõltuvused pubspec.yaml
Järgmisena peame pubspec.yaml lisama sõltuvuse firebase_auth. Uusima versiooninumbri saamiseks minge aadressile https://pub.dartlang.org/ ja otsige tulemüüri autentimise kohta.

firebase_auth: ^ 0.6.6

Samm 8: impordi Firebase Auth

import 'pakett: firebase_auth / firebase_auth.dart';

Samm 9: lubage Firebase'is registreerumine e-posti ja parooliga

Samm 10: logige sisse Firebase'i

Firebase signInWithEmailAndPassword on meetod, mis tagastab tulevase väärtuse. Seega peab meetod ootama ja välise mähise funktsioonil peab olema asünkroon. Kaasame sisselogimis- ja registreerimismeetodid proovipüügi blokeerimisega. Kui ilmnes tõrge, peaks meie püügiplokk saama tõrketeate lüüa ja kasutajale kuvada.

Erinevus on selles, kuidas tegelik teade talletatakse Firebase'i tõrkevea korral. IOS-is on sõnum e.detailides, Androidi puhul aga e.sõnumis. Platvormi saate hõlpsalt kontrollida, kasutades funktsiooni _isIos = Theme.of (context) .platform == TargetPlatform.iOS. See peaks olema iga vidina loomise meetodi sees, kuna see vajab konteksti.

_validateAndSubmit () async {
  setState (() {
    _errorMessage = "";
    _isLoading = true;
  });
  if (_validateAndSave ()) {
    String userId = "";
    proovige {
      if (_formMode == FormMode.LOGIN) {
        userId = oota vidinat.auth.signIn (_email, _parool);
        print ('Sisse logitud: $ userId');
      } veel {
        userId = oota vidinat.auth.signUp (_email, _parool);
        print ('Registreerunud kasutaja: $ userId');
      }
      if (userId.length> 0 && userId! = null) {
        vidin.onSignedIn ();
      }
    } saak (e) {
      print ('Viga: $ e');
      setState (() {
        _isLoading = vale;
        if (_isIos) {
          _errorMessage = e.detailid;
        } muud
          _errorMessage = e.sõnum;
      });
    }
  }
}

Samm 11: tühjendage vormi väljalülitamisel

Vormi välja lähtestamiseks tuleb kasutajal nii _changeFormToSignUp kui ka _changeFormToLogin lisada järgmine rida, kui kasutaja vahetub sisselogimise ja registreerumise vahel.

formKey.currentState.reset ();

12. samm: proovige kasutaja registreeruda

Proovime kasutaja registreeruda, sisestades e-posti aadressi ja parooli.

Kui ilmneb midagi allpool toodud näidet, on selle põhjuseks see, et meilisõnumi lõpus on lisavahed
I / laperdus (14294): Viga PlatformException (erand, e-posti aadress on valesti vormindatud., Null)
Kui leiate midagi sellist nagu allpool, muutke oma parool vähemalt 6 tähemärgiseks.
I / laperdus (14294): Viga PlatformException (erand, antud parool on vale. [Parool peaks olema vähemalt 6 tähemärki], null)

Lõpuks, kui õnnestumine peaks olema, peaksite oma terminalis nägema järgmist rida. Juhuslik string on kasutajatunnus.

I / laperdus (14294): registreerunud JSwpKsCFxPZHEqeuIO4axCsmWuP2

Kui proovime sisse logida sama kasutajaga, kellega sisse logisime, peaksime saama midagi sellist:

I / laperdus (14294): sisse logitud JSwpKsCFxPZHEqeuIO4axCsmWuP2

Samm 13: rakendage Auth-klass

Looge uus failikõne autentimine.dart. Samuti rakendame abstraktset klassi BaseAuth. Selle abstraktse klassi eesmärk on see, et see toimiks keskmise kihina meie kasutajaliidese komponentide ja tegeliku rakendusklassi vahel, mis sõltub meie valitud raamistikust. Igal juhul otsustasime Firebase vahetada millekski sarnaseks PostgreSQL-ga, siis ei mõjuta see kasutajaliidese komponente.

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

abstraktne klass BaseAuth {
  Tulevane  sisselogimine (Stringi e-post, Stringi parool);
  Future  signUp (Stringi e-post, Stringi parool);
  Future  getCurrentUser ();
  Future  signOut ();
}

klass Auth rakendab BaseAuth {
  lõplik FirebaseAuth _firebaseAuth = FirebaseAuth.instance;

  Tulevane  sisselogimine (Stringi e-post, Stringi parool) asünkroon {
    FirebaseUser user = ootama _firebaseAuth.signInWithEmailAndPassword (e-post: e-post, parool: parool);
    tagastama kasutaja.uid;
  }

  Tulevane  registreerumine (Stringi e-post, Stringi parool) asünkroon {
    FirebaseUser user = ootama _firebaseAuth.createUserWithEmailAndPassword (e-post: e-post, parool: parool);
    tagastama kasutaja.uid;
  }

  Tulevane  getCurrentUser () asünk
    FirebaseUser user = ootama _firebaseAuth.currentUser ();
    tagastama kasutaja.uid;
  }

  Tulevane  signOut () asünk {
    return _firebaseAuth.signOut ();
  }
}

Sisse logimislehel.dart

klass LoginSignUpPage laiendab rakendust StatefulWidget {
LoginSignUpPage ({this.auth});
viimane BaseAuthi autentimine;
@ ületamine
Olek  createState () => uus _LoginPageState ();
}

Peamises lehel

kodu: uus LoginSignUpPage (autent: uus Auth ())

Tagasi sisselogimislehel_sait, võimaldab meil sisselogimiseWithEmailAndPasswordi vastu vahetada

String userId = oota vidinat.auth.signIn (_email, _parool);
String userId = oota vidinat.auth.signUp (_email, _parool);

Samm 14: juur ja kodu VoidCallbackiga

Loome uue failikõne home_page.dart. Pärast kasutaja edukat sisselogimist või registreerumist kuvatakse tühi toimingute loend. Nagu tavaliselt, rakendame tellinguid AppBariga, kuid seekord on meil väljalogimisfunktsiooniks AppBar sees FlatButton. See väljalogimine kutsub FireAse'i väljalogimismeetodit BaseAuthi klassis.

Peame looma ka faili nimega root_page.dart. See asendab kodu: LoginSignUpPage (auth: new Auth ()) meie main.dart'is.

kodu: uus RootPage (autent: uus Auth ())

Kui rakendus käivitub, peaks see navigeerima sellele lehele. See leht töötab haldurina, et kontrollida kehtivat Firebase'i kasutajatunnust ja suunab nad vastavalt sellele lehele. Näiteks kui kasutajatunnus on olemas, tähendab see, et kasutaja on juba sisse logitud ja sisselogimise_registreerimislehe asemel tuleks kasutajale näidata avalehte. Seda tehakse initState-is, mis on funktsioon, mis käivitatakse kõigepealt failis.

Juurlehel on 2 meetodit, milleks on _onLoggedIn ja _onSignedOut. Püüame _onLoggedIn-is saada kasutajatunnust ja seadistusriigi authStatus kasutajale on juba sisse logitud. _OnSignedOut-is kustutame salvestatud kasutajatunnuse ja kasutajariigi seadistusõiguse authStatus pole sisse logitud.

Juurlehel sisestame sisselogimislehele 2 parameetrit, üks on Auth-klass, mida rakendame lihtsamalt (kiirendame seda aadressil main.dart) ja _onLoggedIn-meetodil). Lehel login_signup_ loome 2 muutujat, mille tüüp on autentne BaseAuth ja onSignaIn tüüpi VoidCallback. Logige sisse_registreerimise_lehele edastatud 2 parameetrit hõlpsasti meie kohalikesse muutujatesse, kasutades järgmist rida.

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

viimane BaseAuthi autentimine;
lõplik VoidCallback onSignedIn;

VoidCallback lubab login_signup_page kutsuda juurlehel olevat meetodit, mis on kasutaja sisselogimisel _onSignedIn. Kui _onSignedIn kutsutakse, seab see authStatus väärtuseks LOGGED_IN ja seabState'i rakenduse uuesti joonistama. Kui rakendus on uuesti joonistatud, kontrollib initState authStatust ja kuna see on LOGGED_IN, kuvatakse see avaleht, lubades sisselogimise ja _signOut tühistamise.

juur_leht.dart

@ ületamine
Vidina loomine (BuildContext kontekst) {
  lüliti (authStatus) {
    juhtum AuthStatus.NOT_DETERMINED:
      return _buildWaitingScreen ();
      vaheaeg;
    juhtum AuthStatus.NOT_LOGGED_IN:
      naase uus LoginSignUpPage (
        auth: vidin.auth,
        onSignedIn: _onLoggedIn,
      );
      vaheaeg;
    juhtum AuthStatus.LOGGED_IN:
      if (_userId.length> 0 && _userId! = null) {
        tagasta uus koduleht (
          userId: _userId,
          auth: vidin.auth,
          onSignaOut: _onSignedOut,
        );
      } else return _buildWaitingScreen ();
      vaheaeg;
    vaikimisi:
      return _buildWaitingScreen ();
  }
}

Pange tähele rakenduse paremas ülanurgas asuvat silumisriba. Saate selle hõlpsalt eemaldada, lisades materjali.Art vidinasse järgmise rea

Demo sisselogimisekraan
debugShowCheckedModeBanner: vale,
Siluri riba on eemaldatud

Täieliku lähtekoodi saate allolevas githubi lingis

Kui leiate, et see artikkel on kasulik, lisage mõni

Viide:

The Flutter Pub on keskmine väljaanne, mis pakub teile selle suurepärase tehnoloogia kohta uusimaid ja hämmastavaid ressursse, nagu artiklid, videod, koodid, taskuhäälingusaated jne, et õpetada teile selle abil kauneid rakendusi luua. Leiate meid Facebookist, Twitterist ja meediumist või lisateavet meie kohta leiate siit. Meile meeldiks ühenduse loomine! Ja kui olete kirjanik, kes on huvitatud meile kirjutamisest, saate seda teha nende juhiste kaudu.