Aloitin etupään verkkokehittäjänä ja sitten minusta tuli a lepattaa kehittäjä. Luulen, että jotkut konseptit auttoivat minua omaksumaan Flutterin helpommin. Mukana oli myös uusia konsepteja, jotka olivat erilaisia.
Tässä artikkelissa haluan jakaa kokemukseni ja innostaa kaikkia, jotka ovat halvaantuneet valitessaan yhden ekosysteemin toisen sijaan näyttämällä, kuinka käsitteet siirtyvät ja miten uudet käsitteet ovat opittavissa.
Käsitteet, jotka siirtyivät
Tämä osio näyttää paikat, joissa käyttöliittymän verkkokehitys ja Flutter muistuttavat. Se selittää taitoja, jotka sinulla jo on ja joista on sinulle hyötyä, jos aloitat Flutterin.
1. Käyttöliittymien käyttöönotto
Jos haluat ottaa käyttöön tietyn käyttöliittymän käyttöliittymän webissä, luo HTML-elementtejä ja muotoile ne CSS:llä. Jos haluat ottaa käyttöliittymät käyttöön Flutterissa, kirjoitat widgetit ja muotoile ne ominaisuudet.
Kuten CSS, Color Luokka Dartissa toimii "rgba":n ja "hex" kanssa. Kuten CSS, myös Flutter käyttää pikseleitä tila- ja kokoyksiköihin.
Flutterissa meillä on Dart-luokat ja enumit lähes kaikille CSS-ominaisuuksille ja niiden arvoille. Esimerkiksi:
Flutterilla on myös Column ja Row widgetit. Nämä ovat Flutter-vastineet display: flex CSS:ssä. Määrittääksesi justify-content ja align-items tyylejä, joita käytät MainAxisAlignment ja CrossAxisAlignment ominaisuuksia. Säätääksesi flex-grow -tyyliin, kääri kohteena olevat lapsi-widgetit Column/Row, vuonna Expanded or Flexible.
Flutterilla on edistyneille käyttöliittymille CustomPaint luokka - se on Flutter mitä Canvas API on web-kehitykseen. CustomPaint antaa maalarin piirtää minkä tahansa käyttöliittymän haluamallasi tavalla. Yleensä käytät CustomPaint kun haluat jotain todella monimutkaista. Myös, CustomPaint on paras tapa, kun widgetien yhdistelmä ei toimi.
2. Kehitetään useille Näytön resoluutiot
Verkkosivustot toimivat selaimissa ja mobiilisovellukset laitteissa. Sellaisenaan, kun kehität jompaakumpaa alustaa, sinun on pidettävä alusta mielessä. Jokainen alusta toteuttaa samat ominaisuudet (kamera, sijainti, ilmoitukset jne.) eri tavoin.
Verkkokehittäjänä ajattelet verkkosivustosi reagointikykyä. Käytät mediakyselyitä käsitelläksesi, miltä verkkosivustosi näyttää pienemmillä ja leveämmillä näytöillä.
Siirtyessäsi mobiiliverkkokehityksestä Flutteriin, sinulla on MediaQuery auttajaluokka. The MediaQuery luokka antaa sinulle nykyisen laitteen orientation (maisema tai muotokuva). Se näyttää myös nykyisen näkymän size, The devicePixelRatio, muiden laitetietojen lisäksi. Yhdessä nämä arvot antavat sinulle tietoa mobiililaitteen määrityksistä. Niiden avulla voit muuttaa sitä, miltä mobiilisovelluksesi näyttää eri näytöissä.
3. Työskentely virheenkorjainten, editorien ja komentorivityökalujen kanssa
Työpöytäselaimissa on kehittäjätyökaluja. Näitä työkaluja ovat muun muassa tarkastaja, konsoli, verkkomonitori jne. Nämä työkalut parantavat verkkokehitysprosessia. Flutterilla on myös omansa DevTools. Siinä on muun muassa widget-tarkistus, virheenkorjaus, verkkomonitori.
IDE-tuki on myös samanlainen. Visual Studio Code on yksi suosituimmista verkkokehityksen IDE:istä. VS Codelle on monia verkkoon liittyviä laajennuksia. Myös Flutter tukee VS-koodia. Joten siirron aikana sinun ei tarvitse vaihtaa IDE:tä. VS Codessa on Dart- ja Flutter-laajennukset. Flutter toimii hyvin myös Android Studion kanssa. Sekä Android Studio että VS Code tukevat Flutter DevToolsia. Nämä IDE-integraatiot tekevät Flutter-työkaluista täydellisen.
Useimmat käyttöliittymän JavaScript-kehykset tulevat niiden mukana komentoriviliittymä (CLI). Esimerkiksi: Kulma CLI, Luo React-sovellus, Vue CLIjne. Flutterin mukana tulee myös eksklusiivinen CLI. Flutter CLI:n avulla voit rakentaa, luoda ja kehittää Angular-projekteja. Siinä on komentoja Flutter-projektien analysointiin ja testaamiseen.
Uusia käsitteitä
Tässä osiossa puhutaan Flutter-kohtaisista konsepteista, jotka ovat helpompia tai olemattomia verkkokehityksessä. Se selittää ajatuksia, jotka sinun tulee pitää mielessä, kun siirryt Flutteriin.
Kuinka käsitellä vieritystä
Kun kehitetään verkkoa varten, selaimet käsittelevät oletusarvoisen vierityskäyttäytymisen. Voit kuitenkin vapaasti mukauttaa vieritystä CSS:n avulla (käyttäen overflow).
Näin ei ole Flutterissa. Widget-ryhmät eivät vieritä oletusarvoisesti. Kun huomaat, että widget-ryhmät saattavat vuotaa yli, sinun on määritettävä vieritys ennakoivasti.
Flutterissa voit määrittää vierityksen käyttämällä erikoisia widgetejä, jotka sallivat vierityksen. Esimerkiksi: ListView, SingleChildScrollView, CustomScrollViewjne. Nämä vieritettävät widgetit antavat sinulle erinomaisen hallinnan vieritykseen. Kanssa CustomScrollView, voit määrittää asiantuntevia ja monimutkaisia vieritysmekanismeja sovelluksessa.
Flutterin puolella käyttäen ScrollViews on väistämätöntä. Androidilla ja iOS:llä on ScrollView ja UIScrollView vierityksen hoitamiseen. Flutter tarvitsee tavan yhdistää renderöinti- ja kehittäjäkokemus käyttämällä sitä ScrollViews, myös.
Se voi auttaa lopettamaan ajattelemisen asiakirjarakenteen kulkua ja sen sijaan harkitsemaan sovellusta avoimena kankaana laitteen alkuperäisille maalausmekanismeille.
2. Kehitysympäristön määrittäminen
Voit luoda yksinkertaisimman verkkosivuston luomalla tiedoston a .html laajennus ja avaa se selaimessa. Flutter ei ole niin yksinkertaista. Flutterin käyttäminen edellyttää, että olet asentanut Flutter SDK:n ja ovat määrittäneet Flutterin testilaitteelle. Joten jos haluat koodata Flutter for Android, sinun on tehtävä se määritä Android SDK. Sinun on myös määritettävä vähintään yksi Android-laite (Android-emulaattori tai fyysinen laite).
Tämä koskee myös Apple-laitteita (iOS ja macOS). Kun olet asentanut Flutterin Maciin, sinun on silti määritettävä Xcode ennen kuin jatkat. Tarvitset myös vähintään iOS-simulaattorin tai iPhonen Flutterin testaamiseen iOS:ssä. Flutter työpöydälle on myös huomattava asennus. Windowsissa sinun on määritettävä Windows Development SDK Visual Studion (ei VS Coden) kanssa. Linuxissa asennat lisää paketteja.
Flutter toimii selaimilla ilman lisäasetuksia. Tämän seurauksena voit jättää huomiotta kohdelaitteiden lisäasetukset. Useimmissa tapauksissa käyttäisit Flutteria mobiilisovellusten kehittämiseen. Siksi haluat asentaa ainakin Androidin tai iOS:n. Flutter tulee mukana flutter doctor komento. Tämä komento raportoi kehitysasetuksesi tilan. Tällä tavalla tiedät, mitä työstää asennuksessa tarvittaessa.
Tämä ei tarkoita, että kehitys Flutterissa olisi hidasta. Flutterissa on tehokas moottori. The flutter run komento sallii kuumalatauksen testilaitteeseen koodauksen aikana. Mutta sitten sinun on painettava R todella hot-reload. Tämä ei ole ongelma. Flutterin VS Code -laajennus sallii automaattisen kuuman uudelleenlatauksen tiedostomuutoksissa.
3. Pakkaus ja käyttöönotto
Verkkosivustojen käyttöönotto on halvempaa ja helpompaa verrattuna mobiilisovellusten käyttöönottoon. Kun otat verkkosivustoja käyttöön, käytät niitä verkkotunnusten kautta. Nämä verkkotunnukset uusitaan yleensä vuosittain. Ne ovat kuitenkin valinnaisia.
Nykyään monet alustat tarjoavat ilmaisen isännöinnin.
Esimerkiksi: DigitalOcean antaa sinulle ilmaisen aliverkkotunnuksen .ondigitalocean.com.
Voit käyttää näitä verkkotunnuksia, jos olet rakentamassa dokumentaatiosivustoa. Voit käyttää niitä myös silloin, kun et ole huolissasi brändäyksestä.
Flutterin mobiilisovellusmaailmassa otat sovelluksesi käyttöön yleensä kahdessa paikassa.
Sinun on rekisteröitävä kehittäjätili jokaiselle näistä alustoista. Kehittäjätilin rekisteröiminen vaatii maksun tai tilauksen ja henkilöllisyyden vahvistamisen.
App Storea varten sinun on rekisteröidyttävä Apple Developer -ohjelmaan. Sinun täytyy ylläpitää vuositilaus 99 dollaria. Google Playta varten sinun on tehtävä a kertamaksu 25 dollaria tiliä varten.
Nämä kaupat tarkistavat jokaisen tarkistetun sovelluksen ennen kuin se julkaistaan.
Muista myös, että käyttäjät eivät helposti kuluta sovelluspäivityksiä. Käyttäjien on päivitettävä asennetut sovellukset erikseen. Tämä on toisin kuin verkossa, jossa jokainen näkee vain verkkosivuston uusimman käyttöönotetun version.
Käyttöön otettujen sovellusten hallinta on suhteellisen vaativampaa kuin käyttöön otettujen verkkosivustojen hallinta. Tämän ei kuitenkaan pitäisi pelotella sinua. Molemmissa myymälöissä on loppujen lopuksi miljoonia sovelluksia, joten voit lisätä myös omasi.
Muita ajatuksia Flutterista
Flutter on monialustainen työkalu työpöytä-, mobiili- tai verkkosovellusten rakentamiseen. Flutter-sovellukset ovat pikselin täydellisiä. Flutter maalaa saman käyttöliittymän jokaiselle sovellukselle kohdealustasta riippumatta. Tämä johtuu siitä, että jokainen Flutter-sovellus sisältää Flutter-moottorin. Tämä moottori tekee Flutter UI -koodin. Flutter tarjoaa kankaan jokaiselle laitteelle ja antaa sinun maalata haluamallasi tavalla. Moottori kommunikoi kohdealustan kanssa tapahtumien ja vuorovaikutusten käsittelemiseksi.
Flutter on tehokasta. Siinä on korkean suorituskyvyn taso. Tämä johtuu siitä, että se on rakennettu Dartin kanssa ja hyödyntää Dartin ominaisuuksia.
Näiden monien etujen ansiosta Flutter on hyvä valinta moniin sovelluksiin. Monikäyttöiset sovellukset säästävät rahaa ja aikaa tuotannon ja huollon aikana. Flutter (ja monialustaiset ratkaisut) ei kuitenkaan välttämättä ole optimaalinen valinta joissakin tapauksissa.
Älä käytä Flutteria, jos haluat käyttäjien käyttävän alustan kehittäjätyökaluja sovelluksesi kanssa. Alustan kehittäjätyökalut tarkoittavat tässä laitekohtaisia työkaluja, kuten Android-kehittäjävaihtoehtoja. Se sisältää myös selaimen kehittäjätyökaluja.
Älä käytä Flutter for web -sovellusta, jos odotat selainlaajennusten olevan vuorovaikutuksessa verkkosivuston kanssa.
Älä myöskään käytä Flutteria runsaasti sisältöä sisältäville verkkosivustoille.
Yhteenveto
Tämä oli katsaus taitoihin, jotka siirtyvät etupään verkkokehityksestä työskentelyyn Flutterin kanssa. Keskustelimme myös sovellusten kehityskonsepteista, jotka sinun on opittava verkkokehittäjänä.
Flutter on yksinkertaisempi verkkokehittäjille, koska molempiin liittyy käyttöliittymän käyttöönotto. Jos käynnistät Flutterin, huomaat, että se tarjoaa sinulle hyvän kehittäjäkokemuksen. Kokeile Flutteria! Käytä sitä mobiilisovellusten luomiseen ja tietysti esittele rakentamasi.
Kippis!
