Fladder - det er enkelt å komme i gang

Siden Javascript utviklet seg veldig bra, har vi møtt hybride mobilapplikasjonsrammer som Ionic ved bruk av Angular. Så kom React Native og NativeScript på scenen, som lar deg lage native mobile apps uten Java eller Swift kunnskap.

Ionic var gudaktig oppfinnelse i begynnelsen, men React Native overtok den raskt. Da introduserte Telerik NativeScript, men det gjorde ikke stor innvirkning etter min mening.

Kunne vi bygge mobilapper uten disse alternativene? Helt klart! Denne artikkelen vil føre deg til å bygge din første Flutter-applikasjon (hvis du ikke allerede har det ).

Flutter er Googles nye alfaprosjekt som lar deg bygge native applikasjoner. På grunn av at Flutter er et alfaprosjekt, foreslås det ikke for produksjonsutvikling. (Men hvem bryr seg? ¯ \ _ (ツ) _ / ¯)

Mål: Handlelisteapplikasjon med Flutter & Firebase.

Det du trenger installert

Fladder: Installer fladder fra denne lenken. Ikke glem å følge installasjonstrinnene, installer også plugins. De kan være smerte i rumpa hvis du hopper over

Xcode: Hvis du er på en Mac, trenger du Xcode, som du kan få fra app store her. Du trenger også Xcode for å utvikle iOS-siden av Flutter-appen din.

Android Studio: Du trenger absolutt dette for å utvikle Android-siden av Flutter-appen din. Få den herfra.

IDE: Jeg har brukt VSCode som hovedtekstredigerer, og det er Flutter & Dart-plugins for det, men jeg anbefaler Intellij IDEA for utvikling av Flutter. Den har komplette verktøy for å utvikle en Flutter-app. Så få det herfra.

Få prøve-appen kjørt

Start IDE og klikk på Create New Project, og velg deretter Flutter fra venstre.

Som jeg sa før, hvis du hoppet over installasjonstrinnene, kan det hende at du ikke kan se alternativet Flutter. Så gå tilbake

For de som tok rådene mine, la oss få fortsette!

Fyll resten av tingene som du ønsker.

Java-alternativet er standard for Android-språk, men jeg byttet iOS-språk til Swift fordi jeg ikke aner om Objekt-C, så det er din beslutning å ta.

Nå er du klar med skjelettpåføring. Fjern alle kommentarlinjene fordi jeg ikke synes de er nyttige. Fjern også flytendeActionButton, kroppsinnhold og _incrementCounter-metoden.

Nå har du et rent stillas

La oss lage grensesnittet

Lag en ny sluttstreng i klassen, og erstatt tittelen på Material App og hjem-widget-tittelen. Jeg har også endret søkets fargeprøve til rødt. Jeg liker det !
Nå har du denne skjønnheten i gang

I _MyHomePageState, oppretter du en endelig TextEditingController, som er en kontroller for redigerbart tekstfelt.

final TextEditingController _textController = ny TextEditingController ();

lag deretter _handleSubmitted-metoden for å gjøre fantastiske ting med brukerinndata

void _handleSubmitted (streng tekst) {
    
}

og som endelig, legg til denne koden for å opprette inputcontainer nederst.

Widget _createInputContainer () {
        returner ny beholder (
          margin: const EdgeInsets.symmetric (horisontal: 16.0),
          barn: ny rad (
            barn:  [
              ny Fleksibel (
                barn: nye TextField (
                    kontroller: _textController,
                    onSubmitted: _handleSubmitted,
                    dekorasjon: ny InputDecoration.collapsed (
                        hintText: "Legg til noe"),
                ),
            ),
            ny beholder (
                barn: nye IconButton (
                    farge: Colors.red,
                    icon: nytt ikon (Icons.list),
                    onPression: () {}),
            ),
            ny beholder (
                barn: nye IconButton (
                    farge: Colors.red,
                    ikon: nytt ikon (Icons.send),
                    onPression: () {}),
            ),
        ]
    ),
);
}

Vi har det bra så langt !! Vi opprettet en beholder for input-element, listeknapp og send inn kinda-knapp. onPression-funksjonene er tomme for nå, vi vil jobbe med det senere.

La oss gå tilbake til kroppen til stillaset vårt. Rediger hovedkoden som denne:

body: ny kolonne (
  barn:  [
      ny Fleksibel (
          barn: ny ListView.builder (
              polstring: nye EdgeInsets.all (8.0),
              omvendt: falsk,
              itemBuilder: (_, int index) => null,
              artikkel Antall: 1,
          ),
      ),
      ny Divider (høyde: 1,0),
      ny beholder (
          dekorasjon: ny BoxDecoration (
              farge: Theme.of (kontekst) .cardColor),
          barn: _createInputContainer (),
      ),
  ]
)

OK, nå er kroppen nesten klar. Vi har en liste, en skillelinje mellom listeelementer og inputelementene våre. Som du kan se brukte jeg widgeten _createInputContainer () som underordnet en container. Det er en fin måte å holde koden ren og organisert.

Jeg tror dere alle har det bra til dette tidspunktet

Vel, ærlig talt, dette er min første tutorial noensinne, så jeg er ganske spent. Jeg er ikke sikker på om min måte å veilede på er forståelig, men jeg tror den er

La oss snakke om tingene du må gjøre

  1. Lag innsiden av _handleSubmitted-metoden.
  2. Legg til innsendt tekst som ny listeelement og vis dem.
  3. Lag listen vår brukervennlig interaktiv liste.
  4. Legg Firebase-database til prosjektet.

La oss rulle videre!

Hvis vi tenker på en vanlig applikasjon som håndterer brukerinndata, er det første som dukker opp i tankene å fjerne inndata etter innsending

void _handleSubmitted (String newItem) {
    _textController.clear ();
}

og endre sendeknappen som

ny beholder (
    barn: nye IconButton (
        farge: Colors.red,
        ikon: nytt ikon (Icons.send),
        onPression: () {
            _handleSubmitted (_textController.text) // modifiser dette
        }),
),

Nå kan brukerne sende inndataene, og applikasjonen kan håndtere inndataene, i utgangspunktet tømmer inntaksområdet etter innsending.

Nå vil vi lage en widget som viser listeelementer. Først må vi lage en widget som representerer ett element. La oss lage en StatelessWidget og gi den navnet ListItem og legge den utenfor _MyHomePageState.

klasse ListItem utvider StatelessWidget {
    Listitem ({this.itemName});
    endelige strengelementnavn;
    @overstyring
    Widget build (BuildContext-kontekst) {
    returner ny beholder (
        margin: const EdgeInsets.symmetric (vertikal: 10.0),
        
    );
}
}

I en ny beholder satte vi symmetrisk vertikal margin med verdien 10,0 fordi ellers listeelementer ville se for nær hverandre. Vi vil ha noe kult dritt? ’T Ikke bekymre deg for at vi vil legge til mer styling senere.

Så som barnelement vil vi legge til en rad-widget som viser barna i en horisontal array.

barn: ny rad (
    crossAxisAlignment: CrossAxisAlignment.start, // det er fint;)
     barn:  [
         ny kolonne (
             crossAxisAlignment: CrossAxisAlignment.start,
              barn:  [
                  ny beholder (
                      barn: ny tekst (elementnavn), // dette er varenavn
                   ),
              ]
          ),
     ]
),

Vel, hele koden for denne ListItem-widgeten ser slik ut:

klasse ListItem utvider StatelessWidget {
    Listitem ({this.itemName});
    endelige strengelementnavn;
    @overstyring
    Widget build (BuildContext-kontekst) {
        returner ny beholder (
            margin: const EdgeInsets.symmetric (vertikal: 10.0),
            barn: ny rad (
                crossAxisAlignment: CrossAxisAlignment.start,
                barn:  [
                    ny Fleksibel (
                        ny kolonne (
                        crossAxisAlignment: CrossAxisAlignment.start,
                        barn:  [
                            ny beholder (
                                barn: ny tekst (varenavn),
                            ),
                    ),
                        ]
                    ),
                ]
            ),
        );
    }
}

OK, la oss gå tilbake til _MyHomePageState, legg til denne linjen

final List  _shopItems =  [];

Foreløpig vil vi holde handlelister i en liste-widget. Jeg vet at etter at jeg har avsluttet applikasjonen, vil denne listen være tom igjen, det er derfor vi har Firebase på listen vår å gjøre do

Den herlige _handleSubmitted-metoden venter på oss. Det trenger litt oppmerksomhet på dette tidspunktet.

void _handleSubmitted (String newItem) {
    _textController.clear ();
    if (newItem.trim (). lengde> 0) {
        ListItem listItem = new ListItem (
            itemName: newItem, // Initialiser vår ListItem widget og tilordner brukerens inngang som forekomstverdi.
        );
        setState (() {
            _shopItems.insert (0, listItem);
        });
        // Gi beskjed til rammene om at den interne tilstanden til dette objektet har endret seg.
    }
}

Og som et siste trinn av denne delen, gå til ListView i kroppen av hovedwidgeten vår

barn: ny ListView.builder (
    polstring: nye EdgeInsets.all (8.0),
    omvendt: falsk,
    itemBuilder: (_, int index) => _shopItems [index], // modifiser dette
    itemCount: _shopItems.length, // modifiser dette
),

Før denne modifiseringen hadde vi itemBuilder sin funksjonsdel som null. Vi modifiserte den for å bygge listeelement på gitt indeks over _shopItems, og vi endret itemCount til lengden på _shopItems.

La oss prøve dette live:

Jeg har nettopp innsett at jeg bare brukte iPhone X for å teste applikasjonen. Her er øyeblikksbilde fra Google Pixel 2 XL fra appen. Det ser jævlig kult ut

Jeg antar at alt fungerer veldig bra, bortsett fra når jeg legger til en ny vare, blir det lagt til en ny vare på toppen. Jeg vil finne ut av det mens jeg jobber med andre ting

Jeg vil gi en pause på denne artikkelen her, fordi jeg ikke vil at leserne kjeder seg ved å gjøre alt i en tutorial. Jeg tror vi har gjort noen fine ting til her

I den neste artikkelen implementerer vi dato / klokkeslett, sletter element, angir varen gjort, Firebase-databasen og spesifiserte handlelister som baderoms ting eller kjøkken ting. Det vil være gøy, og du har mitt ord for dette

Som jeg nevnte før, dette er min første opplæring noensinne, så fortell meg om dine vurderinger og anbefalinger om det. Jeg vil gjerne høre mine sterke eller svake sider ved å skrive en tutorial, og jeg vil forbedre meg selv helt sikkert !!

Når du leser og anvender opplæringen, hvis du har problemer med koden eller koden din, kan du gjerne kontakte meg, så prøver jeg mitt beste for å hjelpe deg.

Instagram | e-post