Začel sem kot front-end spletni razvijalec in nato postal Trepetanje razvijalec. Mislim, da je nekaj konceptov pomagalo, da sem lažje sprejel Flutter. Bilo je tudi nekaj novih konceptov, ki so bili drugačni.
V tem članku želim deliti svojo izkušnjo in navdihniti vsakogar, ki se počuti paraliziranega pri izbiri enega ekosistema namesto drugega, tako da pokažem, kako se koncepti prenašajo in kako se je mogoče naučiti novih konceptov.
Koncepti, ki so se prenašali
Ta razdelek prikazuje kraje, kjer sta si podobna sprednji spletni razvoj in Flutter. Pojasnjuje veščine, ki jih že imate in so za vas prednost, če začnete Flutter.
1. Implementacija uporabniških vmesnikov (UI)
Za implementacijo danega uporabniškega vmesnika v sprednjem spletu sestavite elemente HTML in jih oblikujete s CSS. Če želite implementirati uporabniške vmesnike v Flutter, sestavite pripomočki in jih stilizirajte z Lastnosti.
Tako kot CSS, Color razred v Dartu deluje z »rgba« in »hex«. Tako kot CSS tudi Flutter uporablja slikovne pike za enote prostora in velikosti.
V Flutterju imamo razrede Dart in enume za skoraj vse lastnosti CSS in njihove vrednosti. Na primer:
Tudi Flutter ima Column in Row pripomočki. To so ekvivalent Flutterja za display: flex v CSS. Za konfiguracijo justify-content in align-items stilov, ki jih uporabljate MainAxisAlignment in CrossAxisAlignment lastnosti. Za prilagoditev flex-grow slog, ovijte pripomočke prizadetega otroka(-e) v Column/Row, v an Expanded or Flexible.
Za napredne uporabniške vmesnike ima Flutter CustomPaint razreda – Flutter je, kar je Canvas API je spletni razvoj. CustomPaint vam daje slikarja, da narišete poljuben uporabniški vmesnik, kot želite. Običajno boste uporabili CustomPaint ko želite nekaj, kar je res kompleksno. tudi CustomPaint je najboljši način, ko kombinacija pripomočkov ne deluje.
2. Razvijanje za več Ločljivosti zaslona
Spletna mesta delujejo v brskalnikih, mobilne aplikacije pa v napravah. Zato morate pri razvoju za katero koli platformo upoštevati platformo. Vsaka platforma izvaja iste funkcije (kamera, lokacija, obvestila itd.) na različne načine.
Kot spletni razvijalec razmišljate o odzivnosti svojega spletnega mesta. Z medijskimi poizvedbami upravljate, kako izgleda vaše spletno mesto na manjših in širših zaslonih.
Če preidete z mobilnega spletnega razvoja na Flutter, imate MediaQuery pomočniški razred. The MediaQuery razred vam daje trenutno napravo orientation (ležeče ali pokončno). Ponuja tudi trenutno vidno polje sizeje devicePixelRatio, med drugimi informacijami o napravi. Skupaj te vrednosti dajejo vpogled v konfiguracijo mobilne naprave. Z njimi lahko spremenite videz svoje mobilne aplikacije pri različnih velikostih zaslona.
3. Delo z razhroščevalniki, urejevalniki in orodji ukazne vrstice
Namizni brskalniki imajo orodja za razvijalce. Ta orodja vključujejo inšpektor, konzolo, omrežni monitor itd. Ta orodja izboljšujejo proces spletnega razvoja. Tudi Flutter ima svoje Orodja za razvijalce. Med drugimi funkcijami ima inšpektor gradnikov, razhroščevalnik, nadzor omrežja.
Podobna je tudi podpora IDE. Visual Studio Code je eden najbolj priljubljenih IDE za spletni razvoj. Za kodo VS je na voljo veliko razširitev, povezanih s spletom. Tudi Flutter podpira kodo VS. Med prehodom vam torej ni treba spreminjati IDE. Obstajata razširitvi Dart in Flutter za kodo VS. Flutter dobro deluje tudi z Android Studio. Tako Android Studio kot VS Code podpirata Flutter DevTools. Te integracije IDE naredijo orodje Flutter popolno.
Večina sprednjih ogrodij JavaScript ima svoje vmesnik ukazne vrstice (CLI). Na primer: Kotni CLI, Ustvari aplikacijo React, Pogled CLI, itd. Flutter ima tudi ekskluzivo CLI. Flutter CLI vam omogoča gradnjo, ustvarjanje in razvoj Angular projektov. Ima ukaze za analizo in testiranje projektov Flutter.
Koncepti, ki so bili novi
Ta razdelek govori o konceptih, specifičnih za Flutter, ki so lažji ali sploh ne obstajajo v spletnem razvoju. Pojasnjuje ideje, ki jih morate imeti v mislih, ko vstopite v Flutter.
Kako ravnati s pomikanjem
Pri razvijanju za splet privzeto vedenje drsenja urejajo spletni brskalniki. Kljub temu lahko drsenje prilagodite s CSS (z uporabo overflow).
V Flutterju ni tako. Skupine gradnikov se privzeto ne pomikajo. Ko začutite, da bi se lahko skupine gradnikov prelile, morate proaktivno konfigurirati drsenje.
V Flutterju drsenje konfigurirate z uporabo posebnih pripomočkov, ki omogočajo drsenje. Na primer: ListView, SingleChildScrollView, CustomScrollView, itd. Ti drsni pripomočki vam omogočajo odličen nadzor nad drsenjem. z CustomScrollView, lahko znotraj aplikacije konfigurirate strokovne in zapletene drsne mehanizme.
Na Flutterjevi strani, uporaba ScrollViews je neizogiben. Android in iOS imata ScrollView in UIScrollView za upravljanje drsenja. Flutter potrebuje način za poenotenje upodabljanja in izkušnje razvijalca z uporabo svojega ScrollViews, tudi.
Morda vam bo pomagalo prenehati razmišljati o toku strukture dokumenta in raje obravnavati aplikacijo kot odprto platno za izvorne mehanizme slikanja naprave.
2. Nastavitev vašega razvojnega okolja
Če želite ustvariti najpreprostejše spletno mesto, lahko ustvarite datoteko z a .html razširitev in jo odprite v brskalniku. Flutter ni tako preprost. Če želite uporabljati Flutter, morate imeti nameščen Flutter SDK in konfigurirali Flutter za preskusno napravo. Torej, če želite kodirati Flutter za Android, morate to storiti nastavite Android SDK. Prav tako boste morali konfigurirati vsaj eno napravo Android (Android Emulator ali fizično napravo).
To velja za naprave Apple (iOS in macOS). Ko namestite Flutter na Mac, morate še vedno nastaviti Xcode, preden nadaljujete. Potrebovali boste tudi vsaj simulator iOS ali iPhone, da preizkusite Flutter na iOS. Flutter za namizje je tudi precejšnja nastavitev. V sistemu Windows morate nastaviti Windows Development SDK z Visual Studio (ne VS Code). V sistemu Linux boste namestili več paketov.
Brez dodatnih nastavitev Flutter deluje v brskalnikih. Posledično lahko spregledate dodatno nastavitev za ciljne naprave. V večini primerov bi uporabili Flutter za razvoj mobilnih aplikacij. Zato bi želeli nastaviti vsaj Android ali iOS. Flutter prihaja z flutter doctor ukaz. Ta ukaz poroča o statusu vaše razvojne nastavitve. Na ta način veste, na čem morate delati, pri nastavitvi, če je potrebno.
To ne pomeni, da je razvoj v Flutterju počasen. Flutter prihaja z močnim motorjem. The flutter run ukaz dovoljuje vroče ponovno nalaganje na testno napravo med kodiranjem. Toda potem boste morali pritisniti R za dejansko vroče ponovno nalaganje. To ni vprašanje. Flutterjeva razširitev kode VS dovoljuje samodejno vroče ponovno nalaganje pri spremembah datoteke.
3. Pakiranje in namestitev
Namestitev spletnih mest je cenejša in enostavnejša od postavitve mobilnih aplikacij. Ko uvajate spletna mesta, do njih dostopate prek imen domen. Ta imena domen se običajno obnavljajo vsako leto. Vendar so neobvezne.
Danes številne platforme ponujajo brezplačno gostovanje.
Na primer: DigitalOcean vam daje brezplačno poddomeno na .ondigitalocean.com.
Te domene lahko uporabite, če gradite spletno mesto z dokumentacijo. Uporabite jih lahko tudi, ko vas blagovna znamka ne skrbi.
V Flutterjevem svetu z mobilnimi aplikacijami običajno v večini primerov svojo aplikacijo namestite na dve lokaciji.
Na vsaki od teh platform morate registrirati račun razvijalca. Registracija računa razvijalca zahteva plačilo ali naročnino in preverjanje identitete.
Za App Store se morate vpisati v program Apple Developer. Morate vzdrževati letna naročnina 99 $. Za Google Play morate ustvariti enkratno plačilo 25 USD za račun.
Te trgovine pregledajo vsako pregledano aplikacijo, preden jo objavijo.
Upoštevajte tudi, da uporabniki ne uporabljajo zlahka posodobitev aplikacij. Uporabniki morajo izrecno posodobiti nameščene aplikacije. To je v nasprotju s spletom, kjer lahko vsi vidijo najnovejšo nameščeno različico spletnega mesta.
Upravljanje nameščenih aplikacij je razmeroma zahtevnejše od upravljanja nameščenih spletnih mest. Vendar vas to ne bi smelo prestrašiti. Navsezadnje je v obeh trgovinah nameščenih na milijone aplikacij, tako da lahko tudi vi dodate svojo.
Dodatne misli o flutterju
Flutter je orodje za več platform za izdelavo namiznih, mobilnih ali spletnih aplikacij. Aplikacije Flutter so popolne za slikovne pike. Flutter nariše isti uporabniški vmesnik v vsaki aplikaciji ne glede na ciljno platformo. To je zato, ker vsaka aplikacija Flutter vsebuje motor Flutter. Ta mehanizem upodablja kodo uporabniškega vmesnika Flutter. Flutter ponuja platno za vsako napravo in vam omogoča, da slikate, kot želite. Motor komunicira s ciljno platformo za obravnavo dogodkov in interakcij.
Flutter je učinkovit. Ima visoko stopnjo zmogljivosti. To je zato, ker je zgrajen z Dartom in izkorišča Dartove funkcije.
S temi številnimi prednostmi je Flutter dobra izbira za številne aplikacije. Aplikacije za več platform prihranijo denar in čas med proizvodnjo in vzdrževanjem. Vendar pa Flutter (in rešitve za več platform) v nekaterih primerih morda niso najboljša izbira.
Ne uporabljajte Flutterja, če želite, da uporabniki z vašo aplikacijo uporabljajo orodja za razvijalce platforme. Orodja za razvijalce platforme tukaj pomenijo orodja, specifična za napravo, kot so možnosti razvijalca za Android. Vključuje tudi orodja za razvijalce brskalnika.
Ne uporabljajte Flutterja za splet, če pričakujete, da bodo razširitve brskalnika sodelovale s spletnim mestom.
Prav tako ne uporabljajte Flutterja za spletna mesta z veliko vsebine.
zaključek
To je bil pregled veščin, ki se prenašajo iz sprednjega spletnega razvoja v delo s Flutterjem. Razpravljali smo tudi o konceptih razvoja aplikacij, ki se jih morate naučiti kot spletni razvijalec.
Flutter je preprostejši za spletne razvijalce, ker oba vključujeta implementacijo uporabniških vmesnikov. Če zaženete Flutter, boste ugotovili, da vam daje dobro izkušnjo za razvijalce. Preizkusite Flutter! Uporabite ga za izdelavo mobilnih aplikacij in seveda predstavite, kaj ste ustvarili.
Na zdravje!
