Kako stvoriti svoju prvu iOS Flutter aplikaciju na MacOS-u

Flutter 1.0 objavio je Google 4. prosinca 2018. i to je moćan alat koji vam omogućuje stvaranje lijepih aplikacija i na iOS-u i Androidu. Uz druge platforme poput Firebase-a, razvoj mobilnih aplikacija sada je lakši nego ikad.

Dizajnirajte prekrasne aplikacije s lepršavim krevetom

U ovom će vam udžbeniku pokazati kako na Mac računalu stvoriti svoju prvu Hello World aplikaciju s Flutterom, koju ćemo testirati na Xcode iOS simulatoru.

1. Instaliranje lepršavanja

Da bismo instalirali Flutter na naše računalo, prvo ćemo morati preuzeti Flutter SDK. Također bismo trebali kreirati i premjestiti se u prilagođeni radni direktorij i premjestiti preuzetu datoteku flutter_macos_v1.0.0-stable.zip u mapu.

Nakon toga možemo raspakirati alat za lepršanje i postaviti okolinu sa sljedećim kodom koji je upisan u našu konzolu.

raspakirajte flutter_macos_v1.0.0-stable.zip
export PATH = "$ PATH:` pwd` / flutter / bin "

Ako sve pođe kako treba, trebali bismo moći provjeriti ovisnosti unosom sljedećeg koda u našu konzolu.

lepršava doktorica

Prije nego što pređemo na sljedeći korak, također moramo konfigurirati naš bash profil. Bash profil možete naći u kućnom direktoriju nazvanom .bash_profile, otvorite datoteku s uređivačem teksta i dodajte sljedeći redak.

export PATH = "$ PATH: [PATH_TO_FLUTTER_GIT_DIRECTORY] / lepršanje / kanta"

Tamo gdje [PATH_TO_FLUTTER_GIT_DIRECTORY] treba zamijeniti imenom radnog direktorija koji smo upravo stvorili za Flutter. Nakon što smo konfigurirali profil, u našem kućnom direktoriju možemo pokrenuti sljedeću naredbu radi ažuriranja puta.

izvor ~ / .bash_profile

U slučaju kada .profile ne bude pronađen, jednostavno stvorite praznu datoteku s imenom .profile i spremite je u korijenski direktorij, a zatim pokušajte ponovo.

Da bismo provjerili je li put uspješno ažuriran, u konzolu možemo upisati sljedeću naredbu.

odjek $ PATH

I u argumentu povratka trebali bismo vidjeti nešto što sadrži sljedeće. Gdje je [PATH_TO_FLUTTER_GIT_DIRECTORY] naš radni direktorij.

[PATH_TO_FLUTTER_GIT_DIRECTORY] / podrhtavanje / bin

2. Postavljanje iOS simulatora

Da bismo postavili iOS simulator, prvo moramo na naše računalo instalirati Xcode koji se može preuzeti putem interneta ili u trgovini aplikacija. Nakon toga možemo konfigurirati alate naredbenog retka Xcode da koriste našu novoinstaliranu verziju sa sljedećom naredbom upisanom u našu konzolu.

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

Tada možemo otvoriti iOS simulator sljedećom naredbom.

open -a Simulator

Možda će trebati neko vrijeme da se učita, ali nakon što to učinimo možemo prijeći na implementaciju naše prve aplikacije Flutter.

Postoje još dvije stvari koje treba napomenuti:

1. Provjerite postavke da vaš simulator koristi 64-bitni uređaj (iPhone 5s ili noviji) provjerom postavki u izborniku Hardver> Uređaj simulatora.

2. Ovisno o veličini zaslona vašeg razvojnog stroja, simulirani iOS uređaji velike gustoće zaslona mogu prelijevati vaš zaslon. Postavite ljestvicu uređaja ispod izbornika Window> Scale u simulatoru.

3. Stvaranje Hello Hello aplikacije u Flutteru

Stvaranje aplikacije u lepršavom položaju je prilično ravno naprijed, jednostavno upišite sljedeću naredbu. Slobodno možete promijeniti hello_world u bilo koje drugo ime koje volite. Kada je postupak završen, Flutter će na konzoli ispisati „Gotovo!“.

lepršati stvoriti hello_world

Sada možemo ići u direktorij aplikacija sa:

cd hello_world

Zatim pokrenite aplikaciju sa:

lepršati trčati

Flutter će generirati zadani program poput onog prikazan u demonstraciji, koji nam omogućava da kliknemo na gumb dok pratimo broj naših klikova. Glavna komponenta aplikacije definirana je datotekom main.dart unutar mape lib. Pokušajte zamijeniti sadržaj unutar datoteke main.dart sa sljedećim kodom.

import 'paket: lepršav / materijal.dart';

void main () => runApp (MyApp ());

klasa MyApp proširuje StatelessWidget {
  @override
  Sastavljanje widgeta (kontekst BuildContext) {
    vratiti MaterialApp (
      naslov: 'Dobrodošli u Flutter',
      kuća: Skele (
        appBar: AppBar (
          naslov: Tekst ("Dobrodošli u Flutter"),
        ),
        tijelo: Centar (
          dijete: Tekst ("Pozdrav svijetu"),
        ),
      ),
    );
  }
}

Nakon što učinimo, možemo ažurirati simulator upisivanjem "r" unutar konzole. I trebali bismo vidjeti simulator ažuriran na prikazivanje teksta "Hello World", kao što je prikazano u nastavku.

Čestitamo! Sada ste upravo stvorili svoju prvu aplikaciju Flutter, a više informacija vezanih uz Flutter možete pronaći na službenom web mjestu. Flutter prvenstveno koristi pikado, a više možete pronaći i na njegovoj službenoj web stranici.

Zabavite se gradeći mobilne aplikacije!

Ubuduće ću možda napisati još udžbenika o Flutteru. Vjerujem da ovaj alat ima obećavajuću budućnost na području razvoja mobilnih aplikacija. Ispod su upute koje sam napisao vezane uz Flutter i razvoj iOS-a, nastavit ću s ažuriranjem popisa.

  • Kako integrirati svoju iOS Flutter aplikaciju s Firebase na MacOS-u
  • Kako testirati aplikaciju Flutter iOS na svom iOS uređaju