Jeg startede som front-end webudvikler og blev derefter en flagren Udvikler. Jeg tror, der var nogle koncepter, der hjalp mig med at adoptere Flutter lettere. Der var også nogle nye koncepter, der var anderledes.
I denne artikel vil jeg dele min erfaring og inspirere enhver, der føler sig lammet ved at vælge det ene økosystem frem for det andet ved at vise, hvordan begreber overføres og nye begreber kan læres.
Begreber, der blev overført
Dette afsnit viser steder, hvor front-end webudvikling og Flutter ligner. Den forklarer færdigheder, som du allerede har, som er en fordel for dig, hvis du starter Flutter.
1. Implementering af brugergrænseflader (UI'er)
For at implementere en given brugergrænseflade i frontend-web, komponerer du HTML-elementer og style dem med CSS. For at implementere brugergrænseflader i Flutter skal du komponere widgets og style dem med egenskaber.
Ligesom CSS, den Color klasse i Dart arbejder med "rgba" og "hex". Ligesom CSS bruger Flutter pixels til rum- og størrelsesenheder.
I Flutter har vi Dart-klasser og enums for næsten alle CSS-egenskaber og deres værdier. For eksempel:
Flutter har også Column , Row widgets. Disse er Flutter-ækvivalenten til display: flex i CSS. At konfigurere justify-content , align-items stilarter, du bruger MainAxisAlignment , CrossAxisAlignment ejendomme. For at justere flex-grow stil, skal du pakke den eller de berørte børns widget(s) af Column/Row, i en Expanded or Flexible.
Til de avancerede brugergrænseflader har Flutter CustomPaint klasse – det er at Flutter, hvad der Canvas API handler om webudvikling. CustomPaint giver dig en maler til at tegne enhver UI, som du ønsker. Du vil normalt bruge CustomPaint når du vil have noget, der er virkelig komplekst. Også, CustomPaint er den bedste måde, når en kombination af widgets ikke virker.
2. Udvikling for flere Skærmopløsninger
Websites kører på browsere og mobilapps kører på enheder. Som sådan, mens du udvikler til begge platforme, skal du have platformen i tankerne. Hver platform implementerer de samme funktioner (kamera, placering, meddelelser osv.) på forskellige måder.
Som webudvikler tænker du på din hjemmesides responsivitet. Du bruger medieforespørgsler til at håndtere, hvordan din hjemmeside ser ud på mindre og bredere skærme.
Når du kommer over fra mobil webudvikling til Flutter, har du MediaQuery hjælperklasse. Det MediaQuery klasse giver dig den aktuelle enhed orientation (landskab eller portræt). Det giver dig også den aktuelle viewport size, devicePixelRatioblandt andet enhedsoplysninger. Tilsammen giver disse værdier dig indsigt i den mobile enheds konfiguration. Du kan bruge dem til at ændre, hvordan din mobilapp ser ud ved forskellige skærmstørrelser.
3. Arbejde med debuggere, editorer og kommandolinjeværktøjer
Desktopbrowsere har udviklerværktøjer. Disse værktøjer omfatter en inspektør, en konsol, en netværksmonitor osv. Disse værktøjer forbedrer webudviklingsprocessen. Flutter har også sin egen DevTools. Den har blandt andet sin widgetinspektør, debugger, netværksmonitor.
IDE-understøttelse ligner også. Visual Studio Code er en af de mest populære IDE til webudvikling. Der er mange web-relaterede udvidelser til VS Code. Flutter understøtter også VS-kode. Så mens du skifter, behøver du ikke at ændre IDE. Der er Dart- og Flutter-udvidelser til VS Code. Flutter fungerer også godt med Android Studio. Både Android Studio og VS Code understøtter Flutter DevTools. Disse IDE-integrationer gør Flutter-værktøjet komplet.
De fleste front-end JavaScript-rammer leveres med deres kommandolinjegrænseflade (CLI). For eksempel: Vinkel CLI, Opret React-app, CLI -visningosv. Flutter kommer også med en eksklusiv CLI. Flutter CLI giver dig mulighed for at bygge, skabe og udvikle Angular-projekter. Den har kommandoer til at analysere og teste Flutter-projekter.
Begreber, der var nye
Dette afsnit taler om Flutter-specifikke koncepter, der er nemmere eller ikke-eksisterende i webudvikling. Den forklarer ideer, du bør huske på, når du går ind i Flutter.
Sådan håndteres rulning
Når du udvikler til internettet, håndteres standard rulleadfærd af webbrowsere. Alligevel kan du frit tilpasse rulning med CSS (ved hjælp af overflow).
Dette er ikke tilfældet i Flutter. Widgetgrupper ruller ikke som standard. Når du fornemmer, at widgetgrupper kan flyde over, skal du proaktivt konfigurere rulning.
I Flutter konfigurerer du rulning ved at bruge ejendommelige widgets, der tillader rulning. For eksempel: ListView, SingleChildScrollView, CustomScrollView, osv. Disse scrollbare widgets giver dig stor kontrol over rulning. Med CustomScrollView, kan du konfigurere eksperter og komplekse rullemekanismer i applikationen.
På Flutters side ved hjælp af ScrollViews er uundgåelig. Android og iOS har ScrollView , UIScrollView at håndtere scrolling. Flutter har brug for en måde at forene gengivelsen og udvikleroplevelsen ved at bruge dens ScrollViews, også.
Det kan hjælpe at stoppe med at tænke på strømmen af dokumentstruktur og i stedet betragte applikationen som et åbent lærred for en enheds oprindelige malemekanismer.
2. Opsætning af dit udviklingsmiljø
For at lave den enkleste hjemmeside kan du oprette en fil med en .html udvidelse og åbn den i en browser. Flutter er ikke så simpelt. For at bruge Flutter skal du have installeret Flutter SDK , har konfigureret Flutter til en testenhed. Så hvis du vil kode Flutter til Android, skal du opsætte Android SDK. Du skal også konfigurere mindst én Android-enhed (en Android-emulator eller en fysisk enhed).
Dette er det samme tilfælde for Apple-enheder (iOS og macOS). Efter at have installeret Flutter på en Mac, skal du stadig konfigurere Xcode, før du går videre. Du skal også bruge mindst en iOS-simulator eller en iPhone for at teste Flutter på iOS. Flutter til desktop er også en betydelig opsætning. På Windows skal du konfigurere Windows Development SDK med Visual Studio (ikke VS Code). På Linux vil du installere flere pakker.
Uden ekstra opsætning fungerer Flutter på browsere. Som et resultat kan du overse den ekstra opsætning for målenheder. I de fleste tilfælde vil du bruge Flutter til udvikling af mobilapps. Derfor vil du som minimum konfigurere Android eller iOS. Flutter kommer med flutter doctor kommando. Denne kommando rapporterer status for din udviklingsopsætning. På den måde ved du, hvad du skal arbejde med, i opsætningen, hvis det bliver nødvendigt.
Det betyder ikke, at udviklingen i Flutter er langsom. Flutter kommer med en kraftig motor. Det flutter run kommandoen tillader hot-genindlæsning til testenheden under kodning. Men så skal du trykke R til faktisk at genindlæse. Dette er ikke et problem. Flutters VS Code-udvidelse tillader auto-hot-reload ved filændringer.
3. Pakning og implementering
Implementering af websteder er billigere og nemmere sammenlignet med implementering af mobilapplikationer. Når du implementerer websteder, får du adgang til dem via domænenavne. Disse domænenavne bliver normalt fornyet årligt. De er dog valgfrie.
I dag tilbyder mange platforme gratis hosting.
For eksempel: DigitalOcean giver dig et gratis underdomæne på .ondigitalocean.com.
Du kan bruge disse domæner, hvis du bygger et dokumentationswebsted. Du kan også bruge dem, når du ikke er bekymret for branding.
I Flutters verden med mobilapplikationer implementerer du normalt i de fleste tilfælde din app to steder.
Du skal registrere en udviklerkonto på hver af disse platforme. Registrering af en udviklerkonto kræver et gebyr eller abonnement og identitetsbekræftelse.
Til App Store skal du tilmelde dig Apple Developer-programmet. Du skal vedligeholde et årligt abonnement på $99. Til Google Play skal du lave en engangsbetaling på $25 for kontoen.
Disse butikker gennemgår hver app, der er gennemgået, før den går live.
Husk også på, at brugere ikke nemt bruger appopdateringer. Brugere skal eksplicit opdatere installerede applikationer. Dette er i modsætning til nettet, hvor alle bare får se den seneste installerede version af en hjemmeside.
Administration af implementerede applikationer er relativt mere krævende end at administrere implementerede websteder. Dette burde dog ikke skræmme dig. Der er trods alt millioner af apps installeret i begge butikker, så du også kan tilføje dine.
Yderligere tanker om Flutter
Flutter er et værktøj på tværs af platforme til at bygge desktop-, mobil- eller webapplikationer. Flutter-apps er pixel-perfekte. Flutter maler den samme brugergrænseflade på hver app, uanset målplatformen. Dette skyldes, at hver Flutter-app indeholder Flutter-motoren. Denne motor gengiver Flutter UI-koden. Flutter giver et lærred til hver enhed og giver dig mulighed for at male, som du vil. Motoren kommunikerer med målplatformen for at håndtere begivenheder og interaktioner.
Flutter er effektivt. Den har højtydende niveauer. Dette skyldes, at det er bygget med Dart, og det udnytter Darts funktioner.
Med disse mange fordele er Flutter et godt valg til mange applikationer. Apps på tværs af platforme sparer penge og tid under produktion og vedligeholdelse. Flutter (og løsninger på tværs af platforme) er dog muligvis ikke et optimalt valg i nogle tilfælde.
Brug ikke Flutter, hvis du ønsker, at brugerne skal bruge platformsudviklerværktøjer med din applikation. Platformudviklerværktøjer betyder her enhedsspecifikke værktøjer som Android-udviklermuligheder. Det inkluderer også browserudviklerværktøjer.
Brug ikke Flutter til internettet, hvis du forventer, at browserudvidelser interagerer med webstedet.
Brug heller ikke Flutter til indholdstunge websteder.
Konklusion
Dette var en gennemgang af færdigheder, der overføres fra front-end webudvikling til at arbejde med Flutter. Vi diskuterede også app-udviklingskoncepter, som du skal lære som webudvikler.
Flutter er enklere for webudviklere, fordi de begge involverer implementering af brugergrænseflader. Hvis du starter Flutter, vil du finde ud af, at det giver dig en god udvikleroplevelse. Giv Flutter en chance! Brug den til at bygge mobilapps og selvfølgelig fremvise, hvad du bygger.
Cheers!
