Flutter - het is eenvoudig om te beginnen

Omdat Javascript erg goed is geëvolueerd, hebben we hybride mobiele applicatie-frameworks zoals Ionic met Angular ontmoet. Toen kwamen React Native en NativeScript op het podium, waarmee je native mobiele apps kunt maken zonder kennis van Java of Swift.

Ionic was in het begin een goddelijke uitvinding, maar React Native nam het snel over. Toen introduceerde Telerik NativeScript, maar het heeft naar mijn mening geen grote impact gehad.

Kunnen we mobiele apps bouwen zonder deze opties? Jazeker! Dit artikel leidt je naar het bouwen van je eerste Flutter-applicatie (als je dat nog niet hebt gedaan ).

Flutter is het nieuwe alfaproject van Google waarmee u native applicaties kunt bouwen. Omdat Flutter een alfaproject is, wordt het niet aanbevolen voor productieontwikkeling (maar wat maakt het uit? ¯ \ _ (ツ) _ / ¯)

Doel: Boodschappenlijstapplicatie met Flutter & Firebase.

Wat u nodig hebt geïnstalleerd

Flutter: installeer flutter via deze link. Vergeet niet de installatiestappen te volgen, installeer ook de plug-ins. Ze kunnen pijn in de kont zijn als je overslaat

Xcode: als je een Mac gebruikt, heb je Xcode nodig, die je hier in de app store kunt krijgen. Je hebt ook Xcode nodig om de iOS-kant van je Flutter-app te ontwikkelen.

Android Studio: je hebt dit absoluut nodig om de Android-kant van je Flutter-app te ontwikkelen. Haal het hier vandaan.

IDE: Ik gebruik VSCode als mijn hoofdteksteditor en er zijn Flutter & Dart-plug-ins voor, maar ik beveel Intellij IDEA ten zeerste aan voor Flutter-ontwikkeling. Het heeft complete tools om een ​​Flutter-app te ontwikkelen. Dus haal het hier.

De voorbeeldapp laten werken

Start de IDE en klik op Create New Project en selecteer vervolgens Flutter aan de linkerkant.

Zoals ik al eerder zei, als u de installatiestappen hebt overgeslagen, ziet u mogelijk de optie Flutter niet. Dus ga terug

Voor degenen die mijn advies hebben overgenomen, laten we doorgaan!

Vul de rest van de dingen in zoals je wilt.

De Java-optie is standaard voor Android-taal, maar ik heb de iOS-taal overgeschakeld naar Swift omdat ik geen idee heb van Objective-C, dus dit is jouw beslissing.

Nu ben je klaar met skeletapplicatie. Verwijder alstublieft alle commentaarregels omdat ik ze niet nuttig vind. Verwijder ook floatingActionButton, body content en _incrementCounter methode.

Nu heb je een schone steiger

Laten we de interface maken

Maak een nieuwe laatste tekenreeks in de klasse en vervang de titel van de materiaal-app en de titel van de startwidget. Ik heb ook het kleurstaal van de toepassing gewijzigd in rood. Ik vind het leuk !
Nu heb je deze schoonheid in gebruik

Maak in _MyHomePageState een laatste TextEditingController, een controller voor een bewerkbaar tekstveld.

final TextEditingController _textController = new TextEditingController ();

maak vervolgens de methode _handleSubmitted om verbazingwekkende dingen te doen met gebruikersinvoer

void _handleSubmitted (String text) {
    
}

en als laatste, voeg deze code toe om onderaan een invoercontainer te maken.

Widget _createInputContainer () {
        nieuwe container retourneren (
          margin: const EdgeInsets.symmetric (horizontaal: 16.0),
          child: new Row (
            kinderen:  [
              nieuw flexibel (
                child: new TextField (
                    controller: _textController,
                    onSubmitted: _handleSubmitted,
                    decoratie: nieuwe InputDecoration.collapsed (
                        hintText: "Iets toevoegen"),
                )
            )
            nieuwe container (
                child: nieuwe IconButton (
                    kleur: Colors.red,
                    icon: nieuw pictogram (Icons.list),
                    onPressed: () {}),
            )
            nieuwe container (
                child: nieuwe IconButton (
                    kleur: Colors.red,
                    icon: nieuw pictogram (Icons.send),
                    onPressed: () {}),
            )
        ],
    )
);
}

We doen het goed tot nu toe !! We hebben een container gemaakt voor invoerelement, lijstknop en soort knop. onPressed-functies zijn voorlopig leeg, we zullen er later aan werken.

Laten we nu teruggaan naar het lichaam van onze steiger. Bewerk de bodycode als volgt:

body: nieuwe kolom (
  kinderen:  [
      nieuw flexibel (
          child: nieuwe ListView.builder (
              opvulling: nieuwe EdgeInsets.all (8.0),
              reverse: false,
              itemBuilder: (_, int index) => null,
              itemCount: 1,
          )
      )
      nieuwe divider (hoogte: 1.0),
      nieuwe container (
          decoratie: nieuwe BoxDecoration (
              kleur: Theme.of (context) .cardColor),
          child: _createInputContainer (),
      )
  ],
)

Oké, nu is het lichaam bijna klaar. We hebben een lijst, een scheidingslijn tussen lijstitems en onze invoerelementen. Zoals je kunt zien, heb ik de widget _createInputContainer () gebruikt als onderliggend onderdeel van een container. Het is een leuke manier om uw code schoon en georganiseerd te houden.

Ik geloof dat jullie tot nu toe goed zijn

Nou eerlijk gezegd is dit mijn eerste tutorial ooit, dus ik ben nogal opgewonden. Ik weet niet zeker of mijn manier van bijlessen begrijpelijk is, maar ik geloof van wel

Laten we het hebben over de dingen die we moeten doen

  1. Maak de binnenkant van de _handleSubmitted-methode.
  2. Voeg ingezonden tekst toe als nieuw lijstitem en geef ze weer.
  3. Maak onze lijst gebruiksvriendelijke interactieve lijst.
  4. Voeg Firebase-database toe aan het project.

Laten we verder gaan!

Als we denken aan een gewone toepassing die gebruikersinvoer verwerkt, is het eerste wat in de geest opkomt de invoer wissen na het indienen

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

en wijzig de verzendknop als

nieuwe container (
    child: nieuwe IconButton (
        kleur: Colors.red,
        icon: nieuw pictogram (Icons.send),
        onPressed: () {
            _handleSubmitted (_textController.text) // wijzig dit
        }),
)

nu kunnen gebruikers de invoer verzenden en de toepassing kan de invoer verwerken, wist in feite het invoergebied na het indienen.

Nu zullen we een widget maken die lijstitems weergeeft. Eerst moeten we een widget maken die één item vertegenwoordigt. Laten we een StatelessWidget maken en deze ListItem noemen en deze buiten _MyHomePageState plaatsen.

class ListItem breidt StatelessWidget {
    ListItem ({this.itemName});
    laatste String itemName;
    @ Override
    Widget build (BuildContext context) {
    nieuwe container retourneren (
        margin: const EdgeInsets.symmetric (verticaal: 10.0),
        
    );
}
}

In een nieuwe container stellen we een symmetrische verticale marge in met de waarde 10.0 omdat anders lijstitems te dicht bij elkaar zouden staan. We willen wat coole shit he? Maak je geen zorgen, we zullen later meer styling toevoegen.

Vervolgens zullen we als onderliggende element een rij-widget toevoegen die de onderliggende elementen in een horizontale matrix weergeeft.

child: new Row (
    crossAxisAlignment: CrossAxisAlignment.start, // its nice;)
     kinderen:  [
         nieuwe kolom (
             crossAxisAlignment: CrossAxisAlignment.start,
              kinderen:  [
                  nieuwe container (
                      child: new Text (itemName), // dit is de itemnaam
                   )
              ],
          )
     ],
)

Nou, de hele code voor deze ListItem-widget ziet er zo uit:

class ListItem breidt StatelessWidget {
    ListItem ({this.itemName});
    laatste String itemName;
    @ Override
    Widget build (BuildContext context) {
        nieuwe container retourneren (
            margin: const EdgeInsets.symmetric (verticaal: 10.0),
            child: new Row (
                crossAxisAlignment: CrossAxisAlignment.start,
                kinderen:  [
                    nieuw flexibel (
                        nieuwe kolom (
                        crossAxisAlignment: CrossAxisAlignment.start,
                        kinderen:  [
                            nieuwe container (
                                child: new Text (itemName),
                            )
                    )
                        ],
                    )
                ],
            )
        );
    }
}

Oké, laten we nu teruggaan naar de _MyHomePageState, deze regel toevoegen

definitieve lijst  _shopItems =  [];

Voorlopig houden we boodschappenlijstitems in een lijstwidget. Ik weet dat na het afsluiten van de applicatie deze lijst weer leeg zal zijn, daarom hebben we Firebase op onze takenlijst

Onze mooie _handleSubmitted-methode wacht op ons. Het heeft op dit punt enige aandacht nodig.

void _handleSubmitted (String newItem) {
    _textController.clear ();
    if (newItem.trim (). length> 0) {
        ListItem listItem = new ListItem (
            itemName: newItem, // Initialiseer onze ListItem-widget en wijs gebruikersinvoer toe als instantiewaarde.
        );
        setState (() {
            _shopItems.insert (0, listItem);
        });
        // Informeer het framework dat de interne status van dit object is gewijzigd.
    }
}

En als laatste stap van dit deel, ga naar de ListView in hoofdtekst van onze hoofdwidget

child: nieuwe ListView.builder (
    opvulling: nieuwe EdgeInsets.all (8.0),
    reverse: false,
    itemBuilder: (_, int index) => _shopItems [index], // wijzig dit
    itemCount: _shopItems.length, // wijzig dit
)

Vóór deze wijziging hadden we de functielichaam van itemBuilder als nul. We hebben het aangepast om een ​​lijstitem te maken op basis van de gegeven index van _shopItems, en we hebben itemCount gewijzigd in lengte van _shopItems.

Laten we dit live proberen:

Ik heb me net gerealiseerd dat ik alleen iPhone X heb gebruikt om de applicatie te testen. Hier is Google Pixel 2 XL snapshot van de app. Het ziet er verdomd cool uit

Ik denk dat alles heel goed werkt, behalve wanneer ik een nieuw item toevoeg, wordt een nieuw item bovenaan toegevoegd. Ik kom er wel uit terwijl ik aan andere dingen werk

Ik wil hier een pauze geven voor dit artikel, omdat ik niet wil dat lezers zich vervelen door alles in één tutorial te doen. Ik geloof dat we tot hier iets leuks hebben gedaan

In het volgende artikel zullen we datum / tijd implementeren, item verwijderen, item klaar zetten, Firebase-database en gespecificeerde boodschappenlijsten zoals badkamerartikelen of keukenartikelen. Het wordt leuk en je hebt mijn woord hiervoor

Zoals ik al eerder zei, dit is mijn eerste tutorial ooit, dus vertel me je recensies en aanbevelingen hierover. Ik hoor graag mijn sterke of zwakke kanten van het schrijven van een tutorial en ik zal mezelf zeker verbeteren !!

Als u tijdens het lezen en toepassen van de zelfstudie problemen ondervindt met mijn code of uw code, neem dan gerust contact met me op en ik zal mijn best doen om u te helpen.

Instagram | E-mail