Jag började som front-end webbutvecklare och blev sedan en fladder utvecklaren. Jag tror att det fanns några koncept som hjälpte mig att anta Flutter lättare. Det fanns också några nya koncept som var annorlunda.
I den här artikeln vill jag dela med mig av min erfarenhet och inspirera alla som känner sig förlamade av att välja ett ekosystem framför det andra genom att visa hur begrepp överförs och alla nya begrepp är lärbara.
Begrepp som överförts
Det här avsnittet visar platser där front-end webbutveckling och Flutter liknar. Den förklarar färdigheter som du redan har som är en fördel för dig om du startar Flutter.
1. Implementera användargränssnitt (UI)
För att implementera ett givet användargränssnitt i front-end-webben, komponerar du HTML-element och stilar dem med CSS. För att implementera användargränssnitt i Flutter, komponerar du Widgetar och styla dem med egenskaper.
Liksom CSS, den Color klass i Dart fungerar med "rgba" och "hex". Liksom CSS använder Flutter pixlar för utrymmes- och storleksenheter.
I Flutter har vi Dart-klasser och enums för nästan alla CSS-egenskaper och deras värden. Till exempel:
Flutter har också Column och Row widgets. Dessa är Flutter-motsvarigheten till display: flex i CSS. Att konfigurera justify-content och align-items stilar du använder MainAxisAlignment och CrossAxisAlignment egenskaper. För att justera flex-grow stil, slå in de berörda barnens widget(ar) i Column/Row, i en Expanded or Flexible.
För de avancerade användargränssnitten har Flutter CustomPaint klass – det är att Flutter vad Canvas API är till webbutveckling. CustomPaint ger dig en målare att rita vilket gränssnitt du vill. Du kommer vanligtvis att använda CustomPaint när du vill ha något som är riktigt komplext. Också, CustomPaint är det bästa sättet när en kombination av widgets inte fungerar.
2. Utveckla för flera Skärmupplösningar
Webbplatser körs på webbläsare och mobilappar körs på enheter. Som sådan, när du utvecklar för endera plattformen, måste du ha plattformen i åtanke. Varje plattform implementerar samma funktioner (kamera, plats, aviseringar, etc.) på olika sätt.
Som webbutvecklare tänker du på din webbplatss lyhördhet. Du använder mediafrågor för att hantera hur din webbplats ser ut på mindre och bredare skärmar.
När du kommer över från mobil webbutveckling till Flutter har du MediaQuery hjälparklass. De MediaQuery klass ger dig den aktuella enheten orientation (landskap eller porträtt). Det ger dig också den aktuella visningsporten size, den devicePixelRatio, bland annat enhetsinformation. Tillsammans ger dessa värden dig insikter om den mobila enhetens konfiguration. Du kan använda dem för att ändra hur din mobilapp ser ut vid olika skärmstorlekar.
3. Arbeta med felsökare, redigerare och kommandoradsverktyg
Desktop-webbläsare har utvecklarverktyg. Dessa verktyg inkluderar en inspektör, en konsol, en nätverksmonitor, etc. Dessa verktyg förbättrar webbutvecklingsprocessen. Flutter har också sin egen DevTools. Den har sin widgetinspektör, debugger, nätverksmonitor, bland andra funktioner.
IDE-stöd är också liknande. Visual Studio Code är en av de mest populära IDE för webbutveckling. Det finns många webbrelaterade tillägg för VS Code. Flutter stöder också VS Code. Så under övergången behöver du inte ändra IDE. Det finns Dart- och Flutter-tillägg för VS Code. Flutter fungerar också bra med Android Studio. Både Android Studio och VS Code stöder Flutter DevTools. Dessa IDE-integrationer gör Flutter-verktygen komplett.
De flesta front-end JavaScript-ramverk kommer med sina kommandoradsgränssnitt (CLI). Till exempel: Vinkel CLI, Skapa React-app, CLI -vy, etc. Flutter kommer också med en exklusiv CLI. Flutter CLI tillåter dig att bygga, skapa och utveckla Angular-projekt. Den har kommandon för att analysera och testa Flutter-projekt.
Begrepp som var nya
Det här avsnittet talar om Flutter-specifika koncept som är enklare eller obefintliga i webbutveckling. Den förklarar idéer du bör tänka på när du går in i Flutter.
Hur man hanterar rullning
Vid utveckling för webben hanteras standardrullningsbeteendet av webbläsare. Ändå är du fri att anpassa rullning med CSS (med overflow).
Så är inte fallet i Flutter. Widgetgrupper rullar inte som standard. När du känner att widgetgrupper kan svämma över måste du proaktivt konfigurera rullning.
I Flutter konfigurerar du rullning genom att använda speciella widgets som tillåter rullning. Till exempel: ListView, SingleChildScrollView, CustomScrollView, etc. Dessa rullningsbara widgets ger dig stor kontroll över rullningen. Med CustomScrollView, kan du konfigurera expert- och komplexa rullningsmekanismer i applikationen.
På Flutters sida, med hjälp av ScrollViews är oundvikligt. Android och iOS har ScrollView och UIScrollView för att hantera rullning. Flutter behöver ett sätt att förena renderingen och utvecklarupplevelsen genom att använda dess ScrollViewsockså.
Det kan hjälpa att sluta tänka på flödet av dokumentstruktur och istället betrakta applikationen som en öppen duk för en enhets ursprungliga målningsmekanismer.
2. Ställa in din utvecklingsmiljö
För att skapa den enklaste webbplatsen kan du skapa en fil med en .html förlängning och öppna den i en webbläsare. Flutter är inte så enkelt. För att använda Flutter måste du ha installerat Flutter SDK och har konfigurerat Flutter för en testenhet. Så om du vill koda Flutter för Android måste du göra det konfigurera Android SDK. Du måste också konfigurera minst en Android-enhet (en Android-emulator eller en fysisk enhet).
Detta är samma fall för Apple-enheter (iOS och macOS). Efter att ha installerat Flutter på en Mac måste du fortfarande ställa in Xcode innan du går vidare. Du behöver också minst en iOS-simulator eller en iPhone för att testa Flutter på iOS. Flutter för skrivbordet är också en betydande inställning. På Windows måste du konfigurera Windows Development SDK med Visual Studio (inte VS-kod). På Linux kommer du att installera fler paket.
Utan extra inställningar fungerar Flutter i webbläsare. Som ett resultat kan du förbise den extra inställningen för målenheter. I de flesta fall skulle du använda Flutter för utveckling av mobilappar. Därför skulle du vilja ställa in åtminstone Android eller iOS. Flutter kommer med flutter doctor kommando. Detta kommando rapporterar statusen för din utvecklingsinställning. På så sätt vet du vad du ska arbeta med, i installationen, om det skulle behövas.
Det betyder inte att utvecklingen i Flutter går långsamt. Flutter kommer med en kraftfull motor. De flutter run kommandot tillåter varmladdning till testenheten under kodning. Men då måste du trycka R att faktiskt hot-reload. Detta är inte en fråga. Flutters VS Code-förlängning tillåter auto-hot-reload vid filändringar.
3. Paketering och distribution
Att distribuera webbplatser är billigare och enklare jämfört med att distribuera mobilapplikationer. När du distribuerar webbplatser kommer du åt dem via domännamn. Dessa domännamn förnyas vanligtvis årligen. De är dock valfria.
Idag erbjuder många plattformar gratis hosting.
Till exempel: DigitalOcean ger dig en gratis underdomän på .ondigitalocean.com.
Du kan använda dessa domäner om du bygger en dokumentationswebbplats. Du kan också använda dem när du inte är orolig för branding.
I Flutters värld med mobilapplikationer distribuerar du vanligtvis i de flesta fall din app på två ställen.
Du måste registrera ett utvecklarkonto på var och en av dessa plattformar. Registrering av ett utvecklarkonto kräver en avgift eller prenumeration och identitetsverifiering.
För App Store måste du registrera dig för Apple Developer-programmet. Du behöver underhålla en årlig prenumeration på $99. För Google Play måste du skapa en engångsbetalning på 25 USD för kontot.
Dessa butiker granskar varje app som granskats innan den går live.
Tänk också på att användare inte lätt konsumerar appuppdateringar. Användare måste explicit uppdatera installerade applikationer. Detta i motsats till webben där alla bara får se den senaste utrullade versionen av en webbplats.
Att hantera distribuerade applikationer är relativt sett mer krävande än att hantera distribuerade webbplatser. Detta borde dock inte skrämma dig. Det finns trots allt miljontals appar i båda butikerna så att du kan lägga till dina också.
Ytterligare tankar om Flutter
Flutter är ett plattformsoberoende verktyg för att bygga stationära, mobila eller webbapplikationer. Flutter-appar är pixel-perfekta. Flutter målar samma användargränssnitt på varje app, oavsett målplattform. Detta beror på att varje Flutter-app innehåller Flutter-motorn. Denna motor återger Flutter UI-koden. Flutter tillhandahåller en duk för varje enhet och låter dig måla som du vill. Motorn kommunicerar med målplattformen för att hantera händelser och interaktioner.
Flutter är effektivt. Den har höga prestandanivåer. Detta beror på att den är byggd med Dart och den utnyttjar Darts funktioner.
Med dessa många fördelar är Flutter ett bra val för många applikationer. Platsöverskridande appar sparar pengar och tid under produktion och underhåll. Men Flutter (och plattformsoberoende lösningar) kanske inte är ett optimalt val i vissa fall.
Använd inte Flutter om du vill att användare ska använda verktyg för plattformsutvecklare med din applikation. Verktyg för plattformsutvecklare betyder här enhetsspecifika verktyg som Android-utvecklaralternativ. Den innehåller också webbläsarutvecklingsverktyg.
Använd inte Flutter för webben om du förväntar dig att webbläsartillägg ska interagera med webbplatsen.
Använd heller inte Flutter för innehållstunga webbplatser.
Slutsats
Detta var en genomgång av färdigheter som överförs från front-end webbutveckling till att arbeta med Flutter. Vi diskuterade också koncept för apputveckling som du måste lära dig som webbutvecklare.
Flutter är enklare för webbutvecklare eftersom de båda involverar implementering av användargränssnitt. Om du startar Flutter får du reda på att det ger dig en bra utvecklarupplevelse. Ge Flutter ett försök! Använd den för att bygga mobilappar och naturligtvis visa upp vad du bygger.
Skål!
