Kuidas luua oma esimene rakendus iOS Flutter MacOS-is

Flutter 1.0 andis Google välja 4. detsembril 2018 ja see on võimas tööriist, mis võimaldab teil luua ilusaid rakendusi nii iOS-is kui ka Android-is. Koos teiste platvormidega, näiteks Firebase, on mobiilirakenduste arendamine nüüd lihtsam kui kunagi varem.

Kujundage kaunite rakenduste abil Flutter

Selles õpetuses näitan teile, kuidas luua oma esimene Hello Worldi rakendus koos Flutteriga Mac-arvutis, mida katsetame Xcode iOS-i simulaatoril.

1. Flutteri paigaldamine

Flutteri installimiseks oma arvutisse peame esmalt alla laadima Flutteri SDK. Peaksime ka looma ja ümber paigutama kohandatud töökataloogi ning kolima allalaaditud faili flutter_macos_v1.0.0-stable.zip kataloogis.

Pärast seda saame lahtiriipimisriista lahti pakkida ja keskkonna konfigureerida järgmise konsooli sisestatud koodiga.

pakkige välja flutter_macos_v1.0.0-stable.zip
eksport PATH = "$ PATH:" pwd "/ laperdus / prügikast"

Kui kõik läheb õigesti, peaksime saama kontrollida sõltuvusi, sisestades oma konsooli järgmise koodi.

laperdusarst

Enne järgmisele etapile liikumist peame konfigureerima ka oma bash-profiili. Bash-profiili leiate kodukataloogist nimega .bash_profile, avage fail tekstiredaktoriga ja lisage järgmine rida.

eksport PATH = "$ PATH: [PATH_TO_FLUTTER_GIT_DIRECTORY] / rämps / prügikast"

Seal, kus [PATH_TO_FLUTTER_GIT_DIRECTORY] tuleks asendada töötava kataloogi nimega, mille just lõime Flutteri jaoks. Pärast profiili seadistamist saame tee värskendamiseks käivitada oma kodukataloogis järgmise käsu.

allikas ~ / .bash_profiil

Kui .profile ei leita, looge lihtsalt .profile nimega tühi fail ja salvestage see juurkataloogi, seejärel proovige uuesti.

Tee eduka värskendamise kontrollimiseks võime konsooli sisestada järgmise käsu.

kaja $ PATH

Ja me peaksime tagastamisargumendis nägema midagi sellist, mis sisaldab järgmist. Kus [PATH_TO_FLUTTER_GIT_DIRECTORY] on meie töökataloog.

[PATH_TO_FLUTTER_GIT_DIRECTORY] / laperdus / prügikast

2. iOS-i simulaatori seadistamine

IOS-i simulaatori seadistamiseks peame oma arvutisse installima Xcode, mida saab nii veebist kui ka rakenduste poest alla laadida. Pärast seda saame konfigureerida Xcode käsureatööriistad kasutama meie värskelt installitud versiooni, millele on meie konsooli sisestatud järgmine käsk.

sudo xcode-select - lülitage /Applications/Xcode.app/Contents/Developer

Seejärel saame järgmise käsuga avada iOS-i simulaatori.

avatud - simulaator

Selle laadimine võib võtta veidi aega, kuid kui see on tehtud, võime liikuda oma esimese Flutteri rakenduse juurutamisele.

On veel kahte asja, mida tasub tähele panna:

1. Veenduge, et simulaator kasutab 64-bitist seadet (iPhone 5s või uuem), kontrollige simulaatori menüü Riistvara> Seade seadeid.

2. Sõltuvalt teie arendusmasina ekraanisuurusest võivad simuleeritud suure ekraanitihedusega iOS-seadmed teie ekraani üle ujutada. Seadistage seadme skaala simulaatori menüü Aken> Skaala all.

3. Rakenduse Hello World rakenduse Flutter loomine

Rakenduse loomine laperdamisel on üsna lihtne, sisestage lihtsalt järgmine käsk. Võite muuta hello_worldi muudeks nimedeks, mis teile meeldivad. Kui protsess on lõpule jõudnud, prindib Flutter konsoolile teksti „Kõik tehtud!”.

lobisema loo hello_world

Nüüd võime minna rakenduste kataloogi:

cd hello_world

Seejärel käivitage rakendus:

laperdus jooksma

Flutter loob vaikerakenduse, nagu on näidatud demos, mis võimaldab meil klõpsata nuppu, jälgides samal ajal meie klõpsude arvu. Rakenduse põhikomponent on määratletud lib.-kaustas oleva faili main.dart abil. Proovige asendada faili main.dart sisu järgmise koodiga.

import 'pakett: laperdus / materjal.dart';

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

klass MyApp laiendab StatelessWidget {
  @ ületamine
  Vidina loomine (BuildContext kontekst) {
    tagastama MaterialApp (
      pealkiri: "Welcome to Flutter",
      kodu: tellingud (
        appBar: AppBar (
          pealkiri: tekst ('Welcome to Flutter'),
        ),
        keha: Keskel (
          laps: tekst ('Tere maailm'),
        ),
      ),
    );
  }
}

Kui see on valmis, saame simulaatorit värskendada, kirjutades konsooli „r”. Ja peaksime nägema, et simulaatorit värskendatakse teksti "Tere maailm" kuvamiseks, nagu allpool näidatud.

Palju õnne! Nüüd olete just loonud oma esimese Flutteri rakenduse. Flutteriga seotud lisateabe saamiseks leiate need ametlikult veebisaidilt. Flutter kasutab peamiselt viskamist ja rohkem leiate ka selle ametlikult veebisaidilt.

Lõbutsege mobiilirakenduste loomisel!

Edaspidi võin kirjutada veel õpetusi Flutteri kohta. Usun, et sellel tööriistal on mobiilirakenduste arendamise valdkonnas paljutõotav tulevik. Allpool on minu kirjutatud juhendid, mis on seotud Flutteri ja iOS-i arendamisega, jätkan loendi värskendamist.

  • Kuidas integreerida oma iOS-i laperdusrakendus MacOS-i Firebase'iga
  • Kuidas testida oma iOS-i seadmes Flutter iOS-i rakendust