Na een bezoekje aan mijn zwager en zwagerin, werd ik er weer eens op gewezen dat ik niet meer bij de tijd was met mijn ouderwetse iOS en Android ontwikkelkennis. Nu was er een multi platform ding, wel van Google, wat veel meer kon dan de cross platform zaken die we van vroeger kenden. Blijkbaar omdat er libraries gebruikt werden die dan weer platform specifiek waren.
Dus bij mij kwam snel de vraag naar boven: “wat is dat dan??” en we zijn goed en wel een aantal maanden verder, voordat ik er aan toe kom om er eens naar te kijken. Dus snel een clone gemaakt van de Flutter git repo, zodat je Flutter met alle tools en de Dart SDK ontvangt.
rub
Dat verliep een keertje foutloos 😉
Mocht je het niet op deze wijze willen downloaden, dan kun je het ook via deze link regelen.
Flutter is blijkbaar niet zo fancy pancy als wat ik gewend ben, dus het is voor het meest command based! Dus lekker rammelen in de terminal. Voelt net zoals als het ouderwetse programmeren. Begreep er nooit wat van dat er mensen waren die dat in de DOS edit boxje deden, terwijl je goede IDE’s ervoor kon gebruiken. Maar goed, elke nerd zijn eigen tik, zullen we maar denken.
Het goed zetten en ervoor zorgen dat je PATH ook de flutter commando’s kent door de bijbehorende bin directory kenbaar te maken.
dit doe je in je .bash_profile als je met een Mac werkt. Blijkbaar is dat weer iets anders voor de nieuwere mac users (.zshrc):
vi .bash_profile
helemaal onderaan voeg je het onderstaande toe:
export PATH="$PATH:$HOME/flutter/bin"
Daarna moet je het bestand opslaan. Bij vi is dat natuurlijk “:wq” … daarna de terminal sessie opnieuw laden met de nieuwe instellingen:
source .bash_profile
Dan checken of het goed is gegaan, door which flutter uit te voeren.
Controleren of het allemaal goed is geinstalleerd: flutter docter
Oh wat grappig. Want het commando is natuurlijk om te kijken of alles aanwezig is en alle verschillende dependencies voldaan zijn. Of dat patient nog onderzocht moet worden 🙂
Nou bij mij miste er blijkbaar nog wel wat. oh oeps .. typo: docter moest doctor zijn 😉
En opeens:
Dat was raar. Een tijdje staan staren naar het scherm, maar er kwam niets. Geen foutmelding, maar ik kwam ook niet meer in mijn Terminal terug. Dus maar CTRL-C gedaan en nogmaals hetzelfde commando, maar nu met -v om wat meer meldingen (verbose) terug te krijgen. Daarin was te zien dat er 3 onderdelen niet goed waren:
Dus weer snel overstappen om CocoaPods te installeren:
sudo gem install cocoapods
whoepsie … een dikke vette fout:
ERROR: Failed to build gem native extension
SO post: https://stackoverflow.com/questions/20939568/error-error-installing-cocoapods-error-failed-to-build-gem-native-extension
Dus weer aan het zoeken geslagen en blijkt dat de versie niet goed installeert met de bovenstaande instructie. Je kunt een oude versie installeren, zoals 1.8.4 ipv de in het artikel gevonden versie 1.10.0
met het commando brew install cocoapods moest het ook kunnen. Daar wordt geklaagd dat het bijna prehistorisch is en er toch echt wel eerst een update uitgevoerd moet worden:
brew update
met sudo ervoor krijg ik weer een andere foutmelding. Aargh .. command not found.
Dan maar kijken of ik een oudere versie kan installeren …
sudo gem install -n /usr/local/bin cocoapods -v 1.8.4woohoo dat lijkt beter te werken:
Dus nu nog zaken installeren. Dus eerst maar even de AndroidStudio IDE geinstalleerd. Had blijkbaar al een keer eerder wat geinstalleerd, maar daar had ik blijkbaar 50 maand geleden wat mee gedaan. Jemig.
Daarna heb ik via configuratie nog de commandline tools geinstalleerd en daarmee was de fout die eerder getoond werd verdwenen.
Dus ik moet de Android SDK updaten. Dacht al dat de huidige geinstaleerde versie van 50 maand geleden misschien wel wat gedateerd kon zijn 🙂
Dit doe ik dus niet via de commando’s die getoond worden, maar gewoon lekker via de studio:
Vinkje gezet bij Show Package Details, omdat de 29 versie er niet tussen stond. Dus ik heb gewoon de 29 en de latest geselecteerd.
de SDK werd niet geupdate, dus dat heb ik met een standaard check for updates gedaan.
Bleek nog niet genoeg te zijn, dus daarna nog een keertje gevogeld en dan ook weer het vinkje aangevinkt, zodat je ook de andere onderdelen te zien kreeg
Daarna nogmaals flutter doctor gedaan en alles was goed. Melding over de oude cocoapods, maar hopelijk gaat mij dat niet in de weg zitten.
Het commando “pod setup” dat de cocoapods repo moet opzetten en nogal wat tijd kon kosten, was binnen een seconde klaar. Zonder enige tekst of foutmelding of what-so-ever.
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developersudo xcodebuild -license accept
Deze gingen weer net zo snel als de eerdere pod setup commando. Dat vertrouw ik natuurlijk niet helemaal. Maar dit is wel weer nacht nummer 2, dat ik er mee bezig ben. Heb wel stappen gemaakt, maar heb het geheel nog niet werkend. Zucht.
Homebrew gebruik je als een package manager voor het systeem. Cocoapods is blijkbaar hetzelfde, maar dan specifiek voor je projecten.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Oeh .. dat geeft een ander resultaat:
Dan ratelt het wat, maar komt er opeens een done in beeld. Gelukkig had ik ook een terminal met een top erin staan en daar zag ik dat het git commando heel wat resources vrat van mijn zeer verouderde iMac. Dus even geduldig gewacht en ja hoor .. warempel. Hij is zowaar klaar.
Daarna heb ik voor de grap het eerder mislukte brew update uitgevoerd en dat lukte nu ook met de melding dat alles already up-to-date was.
Dan nogmaals de gok voor brew install cocoapods!
Ging goed, behalve symlink aanmaken kon niet, omdat er reeds eentje aanwezig was. De melding was dat je deze ook handmatig kon verwijderen. Dat heb ik gedaan en daarmee ben ik direct benieuwd naar wat er meer achter weg komt.
Dat was snel, want er kwamen nog een melding naar voren over een symlink. Dus daarna het volgende commando dat in de help stond uitgevoerd:
brew link --overwrite cocoapods
AVD Manager
flutter doctor
IDE
Het is belangrijk dat je een IDE gebruikt die lekker bij je past. Het grappige is dat ik verwachte dat er ook een plugin zou zijn voor XCode 😉 Oh nee, dat is natuurlijk niet wenselijk vanuit het MacIntosh oogpunt.
- Android Studio
- Visual Studio Code
- IntelliJ IDEA
Android Studio
Installeer de Plugin
Blijkbaar hebben we Dart nodig 😉 ..
stable Channel switch
Flutter App
woohoo .. we gaan een appje bouwen!
Dit is zo’n ding dat je via 2 routes kunt bewandelen. Je kunt het via de command prompt of in je IDE doen.
Deze eerste keer gaan we het via de command line doen, omdat nerdies altijd even moeten laten zien wat er allemaal gebeurd enzo. Daarna mag je van de grote bazen het gewoon in de IDE doen. Denk dat er genoeg mensen zullen zijn die dat hele command prompt gedoe, hopeloos vinden.
Ze geven aan dat het handig is om je projecten in een consistente plek op te slaan. Denk dat dit maar gewoon in mijn home dir moet zijn. Ik heb een directory aangemaakt: flutter-projects
/Users/dwightlooye/flutter-projects
Om een project te maken heeft flutter het volgende commando:
flutter create
Dit kan met een heleboel vlaggen, waarmee je je project kan configureren, maar voor de eenvoud houden we het hier bij de basis:
flutter create hello_flutter
Dit commando kan alleen uitgevoerd worden, indien je een internet verbinding hebt. Er wordt een zooi van project afhankelijkheden gedownload.
Dit kan ook door de vlag –offline toe te voegen:
flutter create --offline hello_flutter
Maar je moet uiteindelijk toch packages synchroniseren, dus een internet verbinding is onontbeerlijk! Voor degene die dat niet heeft, die zal deze blog ook niet zo snel gaan zitten lezen…vermoed ik 😉
Nu het project gemaakt is, moet je deze kunnen runnen. Daarvoor heb je een aparaat nodig dat aangesloten is, of een emulator. Hee, dat is handig. Dat was dat dingetje die we eerder hadden gemaakt.
Om te zien welke emulatoren er op je pc zitten, voer het volgende commando uit:
flutter emulators
Dit geeft het volgend lijstje:
Het rare is dat ik in het voorbeeld de Pixel 3 had geconfigureerd, maar de Flutter Cookbook die ik aan het volgen ben zegt dat je dan op de Mac alleen de iOS Simulator moet kiezen. Ben benieuwd of dit goed gaat werken, maar ik wil natuurlijk ook de Android variant eens in actie zien.
flutter emulators --launch apple_ios_simulator
Daar zag ik opeens een big mother iPhone 12 Pro op mijn scherm.
Na het commando om het project te draaien:
flutter run
Zie je een tijdje niets. Echter na een tijdje krijg je het Apple logo te zien en in de Terminal zie je ook dat er van alles wordt gedownload:
En in al die tijd, zit ik naar dat scherm te staren… we moeten misschien voorzichtig aan concluderen dat deze ooit eens super rappe iMac ook zijn beste tijd heeft gehad. Na een paar nummers geluisterd te hebben en op mijn telefoon wat verbaasd te zijn over tweets die worden gestuurd over een ministerie die zijn eigen werkwijze hanteert in de WOB en dan 50 extra juristen opzoekt om het sneller te kunnen gaan doen?
Dan eindelijk na minuten zie ik een scherm met daarin de Flutter app icon. Deze aangeklikt en weer langzaam aan zie ik een scherm opbouwen:
Daarna probeerde ik hetzelfde als met de Android versie, maar die knalde er mooi uit:
Dat moeten we dan later maar een keertje tegen het licht aan houden, toch? *bedoeld –> daar zien we nooit meer iets van terug*
Plaftorm taal keuze voor je app
Er zijn veel veranderingen geweest sinds ik een cursus Apps bouwen heb mogen volgen. Daar zijn de Swift- en Kotlin talen bijgekomen, respectievelijk voor iOS en Android. Dus je bent niet meer gebonden aan Objective-C en Java.
flutter create --ios-language swift --android-language kotlin hello_modern_languages
Dit zorgt ervoor dat Swift en Kotlin worden gebruikt. Maar dat is niet een definitieve keuze. Dat kan aangepast worden per project. Echter is het van belang om je te realiseren dat je voor het overgrote deel alleen maar Dart code gaat schrijven. Maakt dus niet echt uit welke keuze je in Flutter maakt.
Onder water wordt er een complete folder structuur opgezet:
Het mooie hiervan is dat je de Android folder in Android Studio kunt openen en de Runner.xcworkspace in de ios folder kun je openen in Xcode. Als je Native code of configuratie toevoegt, dan moet het dus in deze folders komen!
De lib folder is je hart en ziel van je Flutter App. Je moet er dus niets van vernaggelen, anders is het opeens een Flut App … sorry, die zat er al zo lang aan te komen. Hierin komt dus alle Dart code. Na aanmaken project, is er slechts 1 bestand:
main.dart
Dit is de main folder van je project, je moet het wel enigszins georganiseerd houden. Er komen voldoende subfolders hierin terecht en in het boek zullen een aantal verschillende architectuur stijlen aanbevolen worden.
In de root folder staat de pubspec.yaml. Hierin staan de zaken, zoals de app naam, versie etc. Er zit ook een pubspec.lock bestand in. Dit is een gegenereerd bestand dat gebruikt kan worden. Dit moet je dus ook niet aanpassen, maar laten staan. Dit is geen kopie, hij is namelijk anders opgemaakt, zoals hieronder te zien is:
Als laatste is er ook nog een test folder die groot kan worden, naarmate je project groter wordt. De testen die erin komen te staan, zijn ook Dart code zaken. Unit testing wordt hier niet verder behandelt. Testen in Flutter kun je hier wat meer info vinden
Hot reload
In het cookbook staat beschreven dat stateful hot reload toch wel 1 van de belangrijkste mogelijkheden zijn dat Flutter te bieden heeft. Er staat in vermeld hoe dit in te stellen is, maar uiteraard is dat weer anders als je een aantal versies verder bent:
Zo vervelend dit, maar ik heb de moeite genomen om te proberen of het hot reload werkt. Wat houdt het in?
Je start normaal gesproken een virtuele telefoon op, waar je de App op gaat uitvoeren. Als je dan wijzigingen doorvoert, dan is het meestal een nieuwe installatie van de App op het virtuele device en dat duurt natuurlijk behoorlijk lang.
In mijn geval heb ik in Android Studio de Open Project geselecteerd en daar heb ik de hello_flutter folder geselecteerd om te openen. Dan zie je een groen play knopje:
Dat zorgt ervoor dat de hello_flutter demo app op het virtuele device wordt geplaatst.
Als je dan nu code wijzigt in het main.dart bestand, dan zou je dat on the fly terug moeten zien in het device, zonder dat je daar zelf wat voor hoeft te doen. (In het cookbook staat dat je wat vinkjes moet zetten bij Flutter in Languages & Frameworks, maar zoals het plaatje al liet zien was er niet een optie in mijn versie!) Dus dit is een test om te zien of de functie Hot Reload nu standaard geactiveerd is.
Als je de kleur wijzigt (was blue en is nu green) en bijvoorbeeld de title (FlutApp Demo Home Page) van MyHomePage wijzigt. Op het moment dat je dit opslaat, dan zou het naar het device gepushed moeten worden en zonder dat je een refresh of reload actie hoeft uit te voeren is het direct zichtbaar.
En dit is zonder minuten wachten op een nieuwe reload. Dit ken ik nog wel van mijn spastische pogingen om een app te bouwen vroeger met XCode of met Android Studio en Java.
in minder dan een halve seconde was het resultaat dus zichtbaar en dat vind ik best wel een behoorlijke wow !
De samenvatting laat nog even weten dat Flutter een behoorlijk dynamisch iets is, gezien het feit dat het nog niet uitontwikkeld is. Daardoor zal via het doctor commando vaak een nieuwe versie gedownload moeten worden. Daarnaast worden de command line skills in een Terminal nog eens benadrukt en geven ze verschillende boeken als voorbeeld:
Geen idee of ik daar nog een uitstapje in zal moeten maken. Dat zal de tijd leren 🙂
