Fluid UI in de praktijk

Ik wilde een aantal van mijn nieuwe skills in de praktijk brengen, zonder projecten van klanten te gebruiken voor experimenteel werk. Daarom heb ik mijn persoonlijke website opnieuw opgebouwd in Flutter! Je kunt het bekijken op https://www.basdevaan.nl! Deze website is volledig gebouwd met Flutter en zal de playgroundwidgets post om mee te uit te proberen. Het is voor mij ook een veilige plek om nieuwe technieken uit te proberen. 🙏

Fluid UI 0.0.2

Het eerste wat ik wilde doen was het in de praktijk brengen van Fluid UI. Voor de implementatie op mijn website heb ik enkele kleine verbeteringen aangebracht:

Verbeterde prestaties door de nieuwe syntaxis MediaQuery.sizeOf(context) te gebruiken in plaats van MediaQuery.of(context).size om de grootte van MediaQuery op te halen. Hierdoor wordt de widget alleen opnieuw opgebouwd als de grootte wordt aangepast, en niet als er iets anders binMoeten denen de MediaQuery-gegevens wordt aangepast.

Verbeterde syntaxis voor Fluid Space Pairs. Voorheen was er geen handige manier om een space pair te maken, maar nu kun je er een maken door .to toe te voegen aan een Fluid Size. In de praktijk ziet een Size Pair er als volgt uit:

Duidelijk, beknopt en makkelijk te onthouden 😊.

Nadat ik enkele kleine wijzigingen in het Fluid UI-pakket had aangebracht, begon ik het op mijn website te implementeren. Aanvankelijk was ik bang dat het voortdurend peilen van MediaQuery-gegevens de website zou vertragen. Voor een Flutter for Web-webpagina presteert deze echter nog steeds redelijk goed. Ik moet toegeven dat Flutter for Web misschien nog niet de beste tool is voor dit soort websites. Desalniettemin is het een goede manier om de prestaties te monitoren.

Tijdens het gebruik ben ik nog geen grote nadelen tegengekomen, wat een goed teken is. Bovendien worden de maatvoeringen op een eenvoudige manier ingesteld. Als we later besluiten om van Fluid af te stappen, is het eenvoudig om alle Context.fluid.size-objecten te vervangen door statische Size-objects. Het risico van implementatie hiervan is daarom kleiner dan verwacht.

Het grappige is dat deze playground de hele Material-app op de playground pagina laadt, waarbij de routing en andere aspecten van de app worden nagebootst. Technisch gezien is dit een soort Flutter-app binnen een Flutter-app, een Matryoshka 🪆.

Het mooie van deze playground is dat je de Fluid-configuratie kunt aanpassen en de veranderingen in een toegepaste context kunt zien. Dit is niet zomaar een voorbeeldpagina, maar een echte app waarop je kunt zien hoe deze wordt gebruikt. Je kunt ook de code van mijn website op Github bekijken om een beter idee te krijgen. Door de Fluid UI-configuratie aan te passen, kan je de configuratie bepalen die bij jouw eigen toepassing past en zien welke wijzigingen van invloed zijn op welke schermformaten.

Bevindingen & blik in de toekomst

Zoals het er nu uitziet, vind ik Fluid UI leuk! Ik heb het met veel plezier in de praktijk gebracht en ben nog geen grote minpunten tegengekomen. Er zijn echter nog enkele dingen die ik wil verifiëren:

• Kijken hoe Fluid UI presteert met talloze widgets op het scherm die veranderen op basis van de Fluid sizing.
• Testen en verifiëren dat Fluid UI geen significante prestatie-impact heeft op een app die zelden van schermgrootte verandert. Een telefoon-app die zelden van grootte verandert, zou bijvoorbeeld geen prestatieverlies moeten lijden als gevolg van een responsive gebruikersinterface.
• De impact onderzoeken van Fluid UI op Widget- en Golden-tests.
• Samenwerken met een designer om Fluid UI in een daadwerkelijk project te implementeren en te gebruiken.

Bovendien zijn er onlangs veel wijzigingen aangebracht in Figma, de tool waarin wij onze applicaties ontwerpen. Sinds een paar maanden is het mogelijk om variabelen te gebruiken in Figma, en ik zal op zoek gaan naar een goede integratie van dit systeem. Stel je een wereld voor waarin een designer simpelweg een willekeurige schermgrootte kan kiezen en meteen al zijn spacings en fonts perfect op maat kan maken voor dat ontwerp 🤯

Ten slotte

Dit is zeker niet de laatste keer dat ik over Fluid UI schrijf, dus houd toekomstige berichten over dit onderwerp in de gaten. In mijn komende blog Putting it into Practice zal ik ook Widget/Golden testing en Widgetbook behandelen. Dit is een onderwerp waar ik recentelijk over schreef en dat ik in de praktijk wil brengen, en het zal ook een van de dingen testen die ik wil verifiëren voor Fluid UI. Als je geïnteresseerd bent, houd mijn blogs dan in de gaten, want dan test ik alle widgets op mijn website en voeg ze toe aan Widgetbook 📓.