Ik ben begonnen als front-end webdeveloper en werd toen een Flutter ontwikkelaar. Ik denk dat er enkele concepten waren die me hielpen om Flutter gemakkelijker te adopteren. Er waren ook enkele nieuwe concepten die anders waren.
In dit artikel wil ik mijn ervaring delen en iedereen inspireren die zich verlamd voelt bij het kiezen van het ene ecosysteem boven het andere door te laten zien hoe concepten worden overgedragen en nieuwe concepten leerbaar zijn.
Concepten die zijn overgedragen
Deze sectie toont plaatsen waar front-end webontwikkeling en Flutter op elkaar lijken. Het legt vaardigheden uit die je al hebt en die een voordeel voor je zijn als je met Flutter begint.
1. Implementeren van gebruikersinterfaces (UI's)
Om een bepaalde gebruikersinterface in front-end web te implementeren, stelt u HTML-elementen samen en stijlt u deze met CSS. Om UI's in Flutter te implementeren, stelt u samen: widgets en style ze met vastgoed.
Net als CSS, de Color class in Dart werkt met "rgba" en "hex". Net als CSS gebruikt Flutter pixels voor ruimte- en grootte-eenheden.
In Flutter hebben we Dart-klassen en opsommingen voor bijna alle CSS-eigenschappen en hun waarden. Bijvoorbeeld:
Flutter heeft ook Column en Row widgets. Dit is het Flutter-equivalent voor: display: flex in CSS. Configureren justify-content en align-items stijlen, gebruik je MainAxisAlignment en CrossAxisAlignment eigendommen. Om de . aan te passen flex-grow stijl, wikkel de betrokken kind(eren) widget(s) van de Column/Rowin een Expanded or Flexible.
Voor de geavanceerde gebruikersinterfaces heeft Flutter de CustomPaint klasse - het is om te Flutteren wat de Canvas API is voor webontwikkeling. CustomPaint geeft je een schilder om elke gebruikersinterface te tekenen zoals je wilt. Meestal gebruik je CustomPaint als je iets wilt dat echt complex is. Ook, CustomPaint is de beste manier wanneer een combinatie van widgets niet werkt.
2. Ontwikkelen voor meerdere Schermresoluties
Websites draaien op browsers en mobiele apps draaien op apparaten. Als zodanig moet u bij het ontwikkelen van beide platforms rekening houden met het platform. Elk platform implementeert dezelfde functies (camera, locatie, meldingen, enz.) op verschillende manieren.
Als webontwikkelaar denk je na over de responsiviteit van je website. U gebruikt mediaquery's om te bepalen hoe uw website eruitziet op kleinere en bredere schermen.
Overstappen van mobiele webontwikkeling naar Flutter, je hebt de MediaQuery helper klasse. De MediaQuery class geeft je het huidige apparaat orientation (landschap of portret). Het geeft je ook de huidige viewport size devicePixelRatio, onder andere apparaatinformatie. Samen geven deze waarden u inzicht in de configuratie van het mobiele apparaat. U kunt ze gebruiken om te wijzigen hoe uw mobiele app eruitziet op verschillende schermformaten.
3. Werken met Debuggers, Editors en Command Line Tools
Desktopbrowsers hebben ontwikkelaarstools. Deze tools omvatten een inspecteur, een console, een netwerkmonitor, enz. Deze tools verbeteren het webontwikkelingsproces. Flutter heeft ook zijn eigen DevTools. Het heeft onder andere zijn widget-inspecteur, debugger, netwerkmonitor.
IDE-ondersteuning is ook vergelijkbaar. Visual Studio Code is een van de meest populaire IDE voor webontwikkeling. Er zijn veel webgerelateerde extensies voor VS Code. Flutter ondersteunt ook VS Code. Dus tijdens het overstappen hoeft u de IDE niet te wijzigen. Er zijn Dart- en Flutter-extensies voor VS Code. Flutter werkt ook goed met Android Studio. Zowel Android Studio als VS Code ondersteunen Flutter DevTools. Deze IDE-integraties maken Flutter-tooling compleet.
De meeste front-end JavaScript-frameworks worden geleverd met hun opdrachtregelinterface (CLI). Bijvoorbeeld: Hoekige CLI, Maak React App, CLI-weergave, enz. Flutter wordt ook geleverd met een exclusieve CLI. Met de Flutter CLI kunt u Angular-projecten bouwen, creëren en ontwikkelen. Het heeft opdrachten voor het analyseren en testen van Flutter-projecten.
Concepten die nieuw waren
Deze sectie gaat over Flutter-specifieke concepten die gemakkelijker of niet bestaan in webontwikkeling. Het legt ideeën uit die u in gedachten moet houden als u Flutter binnengaat.
Hoe om te gaan met scrollen
Bij het ontwikkelen voor het web wordt het standaard scrollgedrag afgehandeld door webbrowsers. Toch staat het u vrij om het scrollen aan te passen met CSS (met behulp van overflow).
Bij Flutter is dat niet het geval. Widgetgroepen scrollen niet standaard. Als u merkt dat widgetgroepen kunnen overlopen, moet u het scrollen proactief configureren.
In Flutter configureert u scrollen met behulp van eigenaardige widgets die scrollen mogelijk maken. Bijvoorbeeld: ListView, SingleChildScrollView, CustomScrollView, enz. Deze schuifbare widgets geven je geweldige controle over het scrollen. Met CustomScrollView, kunt u deskundige en complexe schuifmechanismen configureren binnen de toepassing.
Aan de kant van Flutter, met behulp van ScrollViews is onvermijdelijk. Android en iOS hebben ScrollView en UIScrollView scrollen te verwerken. Flutter heeft een manier nodig om de rendering- en ontwikkelaarservaring te verenigen door gebruik te maken van zijn ScrollViews, te.
Het kan helpen om te stoppen met nadenken over de stroom van documentstructuur en in plaats daarvan de toepassing te beschouwen als een open canvas voor de oorspronkelijke schildermechanismen van een apparaat.
2. Uw ontwikkelomgeving instellen
Om de eenvoudigste website te maken, kunt u een bestand maken met een .html extensie en open deze in een browser. Fluiten is niet zo eenvoudig. Om Flutter te gebruiken, moet je de Flutter SDK hebben geïnstalleerd en hebben Flutter geconfigureerd voor een testapparaat. Dus als je Flutter voor Android wilt coderen, moet je: de Android SDK instellen. U moet ook ten minste één Android-apparaat configureren (een Android-emulator of een fysiek apparaat).
Dit is hetzelfde geval voor Apple-apparaten (iOS en macOS). Nadat je Flutter op een Mac hebt geïnstalleerd, moet je Xcode nog steeds instellen voordat je verder gaat. Je hebt ook minimaal een iOS-simulator of een iPhone nodig om Flutter op iOS te testen. Flutter voor desktop is ook een behoorlijke opstelling. Op Windows moet u de Windows Development SDK instellen met Visual Studio (niet VS Code). Op Linux installeer je meer pakketten.
Zonder extra instellingen werkt Flutter op browsers. Als gevolg hiervan zou u de extra instellingen voor doelapparaten over het hoofd kunnen zien. In de meeste gevallen zou u Flutter gebruiken voor de ontwikkeling van mobiele apps. Daarom zou u op zijn minst Android of iOS willen instellen. Flutter wordt geleverd met de flutter doctor opdracht. Met deze opdracht wordt de status van uw ontwikkelingsconfiguratie gerapporteerd. Zo weet je waar je aan moet werken, indien nodig in de setup.
Dit betekent niet dat de ontwikkeling in Flutter traag verloopt. Flutter wordt geleverd met een krachtige motor. De flutter run commando staat hot-reloading naar het testapparaat toe tijdens het coderen. Maar dan moet je op drukken R daadwerkelijk hot-reloaden. Dit is geen probleem. Flutter's VS Code-extensie staat auto-hot-reload toe bij bestandswijzigingen.
3. Verpakking en implementatie
Het implementeren van websites is goedkoper en gemakkelijker in vergelijking met het implementeren van mobiele applicaties. Wanneer u websites implementeert, krijgt u toegang tot deze via domeinnamen. Deze domeinnamen worden doorgaans jaarlijks vernieuwd. Ze zijn echter optioneel.
Tegenwoordig bieden veel platforms gratis hosting aan.
Bijvoorbeeld: DigitalOcean geeft je een gratis subdomein op .ondigitalocean.com.
U kunt deze domeinen gebruiken als u een documentatiewebsite bouwt. Je kunt ze ook gebruiken als je je geen zorgen maakt over branding.
In de wereld van Flutter met mobiele applicaties implementeert u uw app meestal in de meeste gevallen op twee plaatsen.
U moet op elk van deze platforms een ontwikkelaarsaccount registreren. Het registreren van een ontwikkelaarsaccount vereist een vergoeding of abonnement en identiteitsverificatie.
Voor de App Store moet u zich inschrijven voor het Apple Developer-programma. Je moet onderhouden een jaarabonnement van $ 99. Voor Google Play moet u een eenmalige betaling van $ 25 voor de rekening.
Deze winkels beoordelen elke beoordeelde app voordat deze live gaat.
Houd er ook rekening mee dat gebruikers niet gemakkelijk app-updates consumeren. Gebruikers moeten geïnstalleerde applicaties expliciet bijwerken. Dit in tegenstelling tot het web waar iedereen gewoon de laatste geïmplementeerde versie van een website te zien krijgt.
Het beheren van geïmplementeerde applicaties is relatief veeleisend dan het beheren van geïmplementeerde websites. Dit hoeft u echter niet af te schrikken. Er zijn tenslotte miljoenen apps geïmplementeerd in beide winkels, dus u kunt de uwe ook toevoegen.
Aanvullende gedachten over flutter
Flutter is een platformonafhankelijke tool om desktop-, mobiele of webapplicaties te bouwen. Flutter-apps zijn pixel-perfect. Flutter schildert dezelfde gebruikersinterface op elke app, ongeacht het doelplatform. Dit komt omdat elke Flutter-app de Flutter-engine bevat. Deze engine geeft de Flutter UI-code weer. Flutter biedt een canvas voor elk apparaat en stelt u in staat om te schilderen zoals u wilt. De engine communiceert met het doelplatform om gebeurtenissen en interacties af te handelen.
Flutter is efficiënt. Het heeft hoge prestatieniveaus. Dit komt omdat het is gebouwd met Dart en het gebruik maakt van de functies van Dart.
Met deze vele voordelen is Flutter een goede keuze voor vele toepassingen. Cross-platform apps besparen geld en tijd tijdens productie en onderhoud. Flutter (en platformonafhankelijke oplossingen) is in sommige gevallen echter mogelijk geen optimale keuze.
Gebruik Flutter niet als u wilt dat gebruikers tools voor platformontwikkelaars gebruiken bij uw toepassing. Platformontwikkelaarstools betekenen hier apparaatspecifieke tools zoals Android-ontwikkelaarsopties. Het bevat ook tools voor browserontwikkelaars.
Gebruik Flutter voor het web niet als u verwacht dat browserextensies interactie hebben met de website.
Gebruik Flutter ook niet voor websites met veel inhoud.
Conclusie
Dit was een overzicht van vaardigheden die worden overgedragen van front-end webontwikkeling naar het werken met Flutter. We bespraken ook app-ontwikkelingsconcepten die je als webontwikkelaar moet leren.
Flutter is eenvoudiger voor webontwikkelaars omdat ze beide betrekking hebben op het implementeren van gebruikersinterfaces. Als je Flutter start, zul je ontdekken dat het je een goede ontwikkelaarservaring geeft. Probeer Flutter eens! Gebruik het om mobiele apps te bouwen en natuurlijk om te laten zien wat je bouwt.
Cheers!
