Flutter - Det er nemt at komme i gang

Da Javascript udviklede sig meget godt, har vi mødt hybrid mobile applikationsrammer som Ionic ved hjælp af Angular. Så kom React Native og NativeScript på scenen, som giver dig mulighed for at oprette native mobile apps uden Java eller Swift viden.

Ionic var gudlignende opfindelse i begyndelsen, men React Native overtog den hurtigt. Derefter introducerede Telerik NativeScript, men det havde ikke nogen stor indflydelse efter min mening.

Kunne vi bygge mobile apps uden disse muligheder? Helvede ja! Denne artikel vil føre dig til at opbygge din første Flutter-applikation (hvis du ikke allerede har gjort det ).

Flutter er Googles nye alpha-projekt, der giver dig mulighed for at oprette native applikationer. På grund af at Flutter er et alfaprojekt, foreslås det ikke til produktionsudvikling. (Men hvem er ligeglad med? ¯ \ _ (ツ) _ / ¯)

Mål: Indkøbsliste-applikation med Flutter & Firebase.

Hvad du har brug for installeret

Flutter: Installer flutter fra dette link. Glem ikke at følge installationstrin, installer også plugins. De kan være smerter i røv, hvis du springer

Xcode: Hvis du er på en Mac, har du brug for Xcode, som du kan få fra app store her. Du har også brug for Xcode for at udvikle iOS-siden af ​​din Flutter-app.

Android Studio: Du har bestemt brug for dette for at udvikle Android-siden af ​​din Flutter-app. Hent det herfra.

IDE: Jeg har brugt VSCode som min hovedteksteditor, og der er Flutter & Dart-plugins til det, men jeg anbefaler stærkt Intellij IDEA til udvikling af Flutter. Det har komplette værktøjer til at udvikle en Flutter-app. Så få det herfra.

At få prøveappen kørt

Start IDE og klik på Opret nyt projekt, og vælg derefter Flutter fra venstre.

Som jeg sagde før, hvis du sprang over installationstrinnene, kan du muligvis ikke se muligheden Flutter. Så gå tilbage

For dem, der tog mit råd, lad os rulle videre!

Fyld resten af ​​ting, som du ønsker.

Java-indstilling er standard for Android-sprog, men jeg skiftede iOS-sprog til Swift, fordi jeg ikke har nogen idé om Objekt-C, så det er din beslutning om at tage.

Nu er du klar med skeletanvendelse. Fjern alle kommentarlinjer, fordi jeg ikke finder dem nyttige. Fjern også floatingActionButton, body content og _incrementCounter-metoden.

Nu har du et rent stillads

Lad os oprette grænsefladen

Opret en ny slutstreng i klassen, og erstat titlen på Material App og titel til hjem-widget. Jeg ændrede også applikationens farveprøve til rød. Jeg kan lide det !
Nu har du denne skønhed i gang

Opret en endelig TextEditingController i _MyHomePageState, som er en controller til redigerbart tekstfelt.

endelig TextEditingController _textController = ny TextEditingController ();

derefter oprette _handleSubmitted metode til at gøre fantastiske ting med bruger input

void _handleSubmitted (strengtekst) {
    
}

og som sidste tilføj denne kode for at oprette inputcontainer i bunden.

Widget _createInputContainer () {
        returner ny beholder (
          margin: const EdgeInsets.symmetric (vandret: 16,0),
          barn: ny række (
            børn:  [
              nyt fleksibelt (
                barn: nyt TextField (
                    controller: _textController,
                    onSubmitted: _handleSubmitted,
                    dekoration: ny InputDecoration.collapsed (
                        hintText: "Tilføj noget"),
                ),
            ),
            ny beholder (
                barn: nye IconButton (
                    farve: Colors.red,
                    ikon: nyt ikon (Icons.list),
                    onPression: () {}),
            ),
            ny beholder (
                barn: nye IconButton (
                    farve: Colors.red,
                    ikon: nyt ikon (Icons.send),
                    onPression: () {}),
            ),
        ],
    ),
);
}

Vi har det godt indtil videre !! Vi oprettede en container til inputelement, listeknap og indsend kindaknap. onPression-funktioner er tomme for nu, vi arbejder med det senere.

Lad os nu vende tilbage til kroppen af ​​vores stillads. Rediger koden som denne:

body: ny kolonne (
  børn:  [
      nyt fleksibelt (
          barn: ny ListView.builder (
              polstring: nye EdgeInsets.all (8.0),
              omvendt: falsk,
              itemBuilder: (_, int index) => null,
              vare Antal: 1,
          ),
      ),
      ny Divider (højde: 1,0),
      ny beholder (
          dekoration: ny BoxDecoration (
              farve: Theme.of (kontekst) .cardColor),
          barn: _createInputContainer (),
      ),
  ],
)

Okay, nu er kroppen næsten klar. Vi har en liste, en skillelinje mellem listeelementer og vores inputelementer. Som du kan se, brugte jeg widgeten _createInputContainer () som underordnet en container. Det er en dejlig måde at holde din kode ren og organiseret.

Jeg tror, ​​I alle er gode indtil dette tidspunkt point

Helt ærligt, dette er min første tutorial nogensinde, så jeg er ret ophidset. Jeg er ikke sikker på, om min vej til vejledning er forståelig, men jeg tror, ​​det er

Lad os tale om tingene at gøre Do

  1. Opret indersiden af ​​_handleSubmitted-metoden.
  2. Tilføj indsendt tekst som en ny liste, og vis dem.
  3. Lav vores liste brugervenlig interaktiv liste.
  4. Føj Firebase-database til projektet.

Lad os rulle videre!

Hvis vi tænker på en almindelig applikation, der håndterer brugerinput, er den første ting, der dukker op i sindet, klar inputet efter indsendelse submit

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

og ændre sendeknappen som

ny beholder (
    barn: nye IconButton (
        farve: Colors.red,
        ikon: nyt ikon (Icons.send),
        onPression: () {
            _handleSubmitted (_textController.text) // ændre dette
        }),
),

nu er brugerne i stand til at indsende input, og ansøgning kan håndtere input, rydder dybest set inputområdet efter indsendelse.

Nu opretter vi en widget, der viser listeelementer. Først skal vi oprette en widget, der repræsenterer et enkelt emne. Lad os oprette et StatelessWidget og navngive det ListItem og sætte det uden for _MyHomePageState.

klasse ListItem udvider StatelessWidget {
    Listitem ({this.itemName});
    endelig String itemName;
    @override
    Widget build (BuildContext kontekst) {
    returner ny beholder (
        margin: const EdgeInsets.symmetric (lodret: 10,0),
        
    );
}
}

I en ny beholder satte vi symmetrisk lodret margin med værdien 10,0, fordi ellers listeposter ville se for tæt på hinanden. Vi vil have noget cool lort, hva? Bare rolig, vi tilføjer mere styling senere.

Så som underordnede element vil vi tilføje en række-widget, der viser dens børn i en vandret matrix.

barn: ny række (
    crossAxisAlignment: CrossAxisAlignment.start, // det er rart;)
     børn:  [
         ny kolonne (
             crossAxisAlignment: CrossAxisAlignment.start,
              børn:  [
                  ny beholder (
                      barn: ny tekst (varenavn), // dette er varenavn
                   ),
              ],
          ),
     ],
),

Nå, hele koden til denne ListItem-widget ser sådan ud:

klasse ListItem udvider StatelessWidget {
    Listitem ({this.itemName});
    endelig String itemName;
    @override
    Widget build (BuildContext kontekst) {
        returner ny beholder (
            margin: const EdgeInsets.symmetric (lodret: 10,0),
            barn: ny række (
                crossAxisAlignment: CrossAxisAlignment.start,
                børn:  [
                    nyt fleksibelt (
                        ny kolonne (
                        crossAxisAlignment: CrossAxisAlignment.start,
                        børn:  [
                            ny beholder (
                                barn: ny tekst (varenavn),
                            ),
                    ),
                        ],
                    ),
                ],
            ),
        );
    }
}

Okay, lad os nu gå tilbage til _MyHomePageState, tilføj denne linje

endelig liste  _shopItems =  [];

På nuværende tidspunkt holder vi indkøbslisteemner i en liste-widget. Jeg ved, når jeg har afsluttet applikationen, at denne liste vil være tom igen, det er derfor, vi har Firebase på vores at gøre-liste

Vores dejlige _handleSubmitted metode venter på os. Det har brug for en vis opmærksomhed på dette tidspunkt.

void _handleSubmitted (String newItem) {
    _textController.clear ();
    if (newItem.trim (). længde> 0) {
        ListItem listItem = nyt ListItem (
            itemName: newItem, // Initialiser vores ListItem-widget og tildele brugerens input som forekomstværdi.
        );
        setState (() {
            _shopItems.insert (0, listItem);
        });
        // Underret rammen om, at den interne tilstand for dette objekt er ændret.
    }
}

Og som et sidste trin i denne del, skal du gå til ListView i kroppen af ​​vores vigtigste widget

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

Før denne ændring havde vi itemBuilder's funktionsorgan som null. Vi ændrede det til at opbygge listepost på et givet indeks over _shopItems, og vi ændrede itemCount til længden på _shopItems.

Lad os prøve dette live:

Jeg er lige klar over, at jeg kun brugte iPhone X til at teste applikationen. Her er Google Pixel 2 XL snapshot fra appen. Det ser forbandet cool ud

Jeg gætter på, at alt fungerer meget godt, undtagen når jeg tilføjer en ny vare, tilføjes en ny vare til toppen. Jeg finder ud af det, mens jeg arbejder på andre ting

Jeg vil gerne give en pause om denne artikel her, fordi jeg ikke ønsker, at læserne keder sig ved at gøre alt i én tutorial. Jeg tror, ​​vi har gjort nogle dejlige ting indtil her

I den næste artikel implementerer vi dato / tid, sletter en vare, indstiller varen gjort, Firebase-databasen og specificerede indkøbslister som badeværelsesting eller køkkenudstyr. Det vil være sjovt, og du har mit ord til dette

Som jeg nævnte før, er dette min første tutorial nogensinde, så fortæl mig dine anmeldelser og anbefalinger om det. Jeg vil meget gerne høre mine stærke eller svage sider ved at skrive en tutorial, og jeg vil forbedre mig selv med sikkerhed !!

Mens du læser og anvender selvstudiet, hvis du står over for problemer med min kode eller din kode, er du velkommen til at kontakte mig, så prøver jeg mit bedste for at hjælpe dig.

Instagram | E-mail