Jeg begynte som front-end webutvikler og ble deretter en flagre utvikler. Jeg tror det var noen konsepter som hjalp meg å ta i bruk Flutter lettere. Det var også noen nye konsepter som var annerledes.
I denne artikkelen vil jeg dele min erfaring og inspirere alle som føler seg lammet med å velge ett økosystem fremfor det andre ved å vise hvordan konsepter overføres og nye konsepter kan læres.
Konsepter som ble overført
Denne delen viser steder hvor front-end webutvikling og Flutter ligner. Den forklarer ferdigheter du allerede har som er en fordel for deg hvis du starter Flutter.
1. Implementering av brukergrensesnitt (UI)
For å implementere et gitt brukergrensesnitt i front-end web, komponerer du HTML-elementer og stiler dem med CSS. For å implementere brukergrensesnitt i Flutter, skriver du widgets og style dem med egenskaper.
Som CSS, den Color klasse i Dart fungerer med "rgba" og "hex". I likhet med CSS bruker Flutter piksler for plass- og størrelsesenheter.
I Flutter har vi Dart-klasser og enums for nesten alle CSS-egenskaper og deres verdier. For eksempel:
Flutter har også Column og Row widgets. Disse er Flutter-ekvivalenten for display: flex i CSS. For å konfigurere justify-content og align-items stiler du bruker MainAxisAlignment og CrossAxisAlignment eiendommer. For å justere flex-grow stil, pakk inn de berørte barnewidgeten(e) til Column/Row, i en Expanded or Flexible.
For de avanserte brukergrensesnittene har Flutter CustomPaint klasse – det er å Flutter hva den Canvas API er til webutvikling. CustomPaint gir deg en maler til å tegne et hvilket som helst brukergrensesnitt som du ønsker. Du vil vanligvis bruke CustomPaint når du vil ha noe som er veldig komplekst. Også, CustomPaint er den beste måten når en kombinasjon av widgets ikke fungerer.
2. Utvikling for flere Skjermoppløsninger
Nettsteder kjøres på nettlesere og mobilapper kjøres på enheter. Som sådan, mens du utvikler for begge plattformene, må du huske på plattformen. Hver plattform implementerer de samme funksjonene (kamera, plassering, varsler osv.) på forskjellige måter.
Som webutvikler tenker du på nettsidens respons. Du bruker mediesøk for å håndtere hvordan nettstedet ditt ser ut på mindre og bredere skjermer.
Når du kommer over fra mobilnettutvikling til Flutter, har du MediaQuery hjelperklasse. De MediaQuery klasse gir deg gjeldende enhet orientation (landskap eller portrett). Den gir deg også gjeldende visningsport sizeden devicePixelRatio, blant annet enhetsinformasjon. Sammen gir disse verdiene deg innsikt om den mobile enhetens konfigurasjon. Du kan bruke dem til å endre hvordan mobilappen din ser ut ved forskjellige skjermstørrelser.
3. Arbeide med feilsøkingsprogrammer, redaktører og kommandolinjeverktøy
Desktop-nettlesere har utviklerverktøy. Disse verktøyene inkluderer en inspektør, en konsoll, en nettverksmonitor osv. Disse verktøyene forbedrer webutviklingsprosessen. Flutter har også sin egen DevTools. Den har blant annet widgetinspektør, debugger, nettverksmonitor.
IDE-støtte er også lik. Visual Studio Code er en av de mest populære IDE for webutvikling. Det er mange nettrelaterte utvidelser for VS Code. Flutter støtter også VS-kode. Så mens du går over, trenger du ikke å endre IDE. Det finnes Dart- og Flutter-utvidelser for VS Code. Flutter fungerer også bra med Android Studio. Både Android Studio og VS Code støtter Flutter DevTools. Disse IDE-integrasjonene gjør Flutter-verktøyet komplett.
De fleste front-end JavaScript-rammeverk kommer med sine kommandolinjegrensesnitt (CLI). For eksempel: Vinkel CLI, Opprett React App, CLI -visning, etc. Flutter kommer også med en eksklusiv CLI. Flutter CLI lar deg bygge, lage og utvikle Angular-prosjekter. Den har kommandoer for å analysere og teste Flutter-prosjekter.
Konsepter som var nye
Denne delen snakker om Flutter-spesifikke konsepter som er enklere eller ikke-eksisterende i webutvikling. Den forklarer ideer du bør huske på når du går inn i Flutter.
Hvordan håndtere rulling
Når du utvikler for nettet, håndteres standard rulleoppførsel av nettlesere. Likevel står du fritt til å tilpasse rulling med CSS (ved hjelp av overflow).
Dette er ikke tilfelle i Flutter. Widget-grupper ruller ikke som standard. Når du merker at widgetgrupper kan flyte over, må du proaktivt konfigurere rulling.
I Flutter konfigurerer du rulling ved å bruke særegne widgets som tillater rulling. For eksempel: ListView, SingleChildScrollView, CustomScrollView, osv. Disse rullbare widgetene gir deg god kontroll over rulling. Med CustomScrollView, kan du konfigurere eksperter og komplekse rullemekanismer i applikasjonen.
På Flutter sin side, ved hjelp av ScrollViews er uunngåelig. Android og iOS har ScrollView og UIScrollView for å håndtere rulling. Flutter trenger en måte å forene gjengivelsen og utvikleropplevelsen ved å bruke sin ScrollViewsogså.
Det kan hjelpe å slutte å tenke på flyten av dokumentstruktur og i stedet vurdere applikasjonen som et åpent lerret for en enhets opprinnelige malemekanismer.
2. Sette opp utviklingsmiljøet
For å lage den enkleste nettsiden kan du lage en fil med en .html utvidelse og åpne den i en nettleser. Flutter er ikke så enkelt. For å bruke Flutter må du ha installert Flutter SDK og har konfigurert Flutter for en testenhet. Så hvis du vil kode Flutter for Android, må du det sette opp Android SDK. Du må også konfigurere minst én Android-enhet (en Android-emulator eller en fysisk enhet).
Dette er det samme tilfellet for Apple-enheter (iOS og macOS). Etter å ha installert Flutter på en Mac, må du fortsatt sette opp Xcode før du går videre. Du trenger også minst en iOS-simulator eller en iPhone for å teste Flutter på iOS. Flutter for desktop er også et betydelig oppsett. På Windows må du sette opp Windows Development SDK med Visual Studio (ikke VS-kode). På Linux vil du installere flere pakker.
Uten ekstra oppsett fungerer Flutter på nettlesere. Som et resultat kan du overse det ekstra oppsettet for målenheter. I de fleste tilfeller vil du bruke Flutter for utvikling av mobilapper. Derfor vil du konfigurere minst Android eller iOS. Flutter kommer med flutter doctor kommando. Denne kommandoen rapporterer statusen til utviklingsoppsettet ditt. På den måten vet du hva du skal jobbe med, i oppsettet, om nødvendig.
Dette betyr ikke at utviklingen i Flutter går sakte. Flutter kommer med en kraftig motor. De flutter run kommandoen tillater varm-reloading til testenheten under koding. Men da må du trykke R å faktisk hot-reload. Dette er ikke et problem. Flutters VS Code-utvidelse tillater automatisk hot-reload ved filendringer.
3. Pakking og distribusjon
Å distribuere nettsteder er billigere og enklere sammenlignet med å distribuere mobilapplikasjoner. Når du distribuerer nettsteder, får du tilgang til dem gjennom domenenavn. Disse domenenavnene fornyes vanligvis årlig. De er imidlertid valgfrie.
I dag tilbyr mange plattformer gratis hosting.
For eksempel: DigitalOcean gir deg et gratis underdomene på .ondigitalocean.com.
Du kan bruke disse domenene hvis du bygger et dokumentasjonsnettsted. Du kan også bruke dem når du ikke er bekymret for merkevarebygging.
I Flutters verden med mobilapplikasjoner distribuerer du vanligvis appen din til to steder i de fleste tilfeller.
Du må registrere en utviklerkonto på hver av disse plattformene. Registrering av en utviklerkonto krever et gebyr eller abonnement og identitetsbekreftelse.
For App Store må du registrere deg for Apple Developer-programmet. Du må vedlikeholde et årlig abonnement på $99. For Google Play må du lage en engangsbetaling på $25 for kontoen.
Disse butikkene vurderer hver app som er vurdert før den publiseres.
Husk også at brukere ikke lett bruker appoppdateringer. Brukere må eksplisitt oppdatere installerte applikasjoner. Dette er i motsetning til nettet der alle bare får se den siste distribuerte versjonen av et nettsted.
Å administrere distribuerte applikasjoner er relativt mer krevende enn å administrere distribuerte nettsteder. Dette bør imidlertid ikke skremme deg. Tross alt er det millioner av apper distribuert i begge butikkene, slik at du også kan legge til dine.
Ytterligere tanker om Flutter
Flutter er et verktøy på tvers av plattformer for å bygge desktop-, mobil- eller webapplikasjoner. Flutter-apper er pikselperfekte. Flutter maler det samme brukergrensesnittet på hver app, uavhengig av målplattformen. Dette er fordi hver Flutter-app inneholder Flutter-motoren. Denne motoren gjengir Flutter UI-koden. Flutter gir et lerret for hver enhet og lar deg male som du vil. Motoren kommuniserer med målplattformen for å håndtere hendelser og interaksjoner.
Flutter er effektivt. Den har høye ytelsesnivåer. Dette er fordi det er bygget med Dart og det utnytter Darts funksjoner.
Med disse mange fordelene er Flutter et godt valg for mange bruksområder. Apper på tvers av plattformer sparer penger og tid under produksjon og vedlikehold. Imidlertid er Flutter (og plattformløsninger) kanskje ikke et optimalt valg i noen tilfeller.
Ikke bruk Flutter hvis du vil at brukere skal bruke plattformutviklerverktøy med applikasjonen din. Plattformutviklerverktøy betyr her enhetsspesifikke verktøy som Android-utvikleralternativer. Det inkluderer også nettleserutviklerverktøy.
Ikke bruk Flutter for web hvis du forventer at nettleserutvidelser skal samhandle med nettstedet.
Ikke bruk Flutter for innholdstunge nettsteder.
konklusjonen
Dette var en gjennomgang av ferdigheter som overføres fra front-end webutvikling til å jobbe med Flutter. Vi diskuterte også apputviklingskonsepter som du må lære deg som webutvikler.
Flutter er enklere for nettutviklere fordi de begge involverer implementering av brukergrensesnitt. Starter du Flutter vil du finne ut at det gir deg en god utvikleropplevelse. Gi Flutter en sjanse! Bruk den til å bygge mobilapper og selvfølgelig vise frem det du bygger.
Cheers!
