import SocialEmbed from "../../../../components/SocialEmbed.astro";


# Rody Davis: Building Adaptive UI/UX in Flutter

<SocialEmbed platform="youtube" id="P1B52fRGjbE" />

## Description

When developing with a cross platform framework there are new problems you are faced with that you do not get when designing for native or web. When we build UI we need to create adaptive experiences that go from a watch, passive modes on a TV or voice only, mobile devices, desktops and everything in between. It takes extra work but if you follow these patterns you will save a lot of time later.

Rody's links:
Adaptive UI Demo - https://rodydavis.github.io/adaptive_ui
YouTube - https://www.youtube.com/rodydavis
GitHub - https://github.com/rodydavis
Twitter - https://www.twitter.com/rodydavis
LinkedIn - https://www.linkedin.com/in/rodydavis
Medium - https://medium.com/@rody.davis.jr
pub.dev - https://pub.dev/publishers/rodydavis.com/packages
Creative Engineering podcast: https://rodydavis.github.io/creative_engineering/
https://www.rodydavis.com

## Transcript

### Intro

**0:00** · i'm going to hand over to roadie thank you how's it going yes thank you yeah and not only um desktop and web but also we now have vr and some other things i'll be going on later so let's go ahead and get started um so

**0:16** · what i'm going to be talking about today is building adaptive ui ux building for every device um this you know when we're working with flutter applications um as with most of us we kind of came from you know a mobile background so or at least some of us did and then other people came from web others from desktop um but because of that you know the tools that we're given maybe only are optimized for one so how do we build in a way that targets multiple screens so that's

**0:41** · what we're talking about today if you want to follow along you can go to this url and there's the demos that you can run in the browser as well as the source code that you can have and of course they can we can have a link to this in the chat below and this is the github

### The Problem

**1:00** · so what is the problem well first of all when you're working with flutter applications and cross-platform frameworks in general you're going to have you know your application run on a variety of context you have you know a laptop with a keyboard that's attached to it you have an ipad which is primarily a touch input but now has a keyboard and a trackpad option and some that only have a keyboard option or with an apple pencil input you have you know watches that have just

**1:28** · like a two inch touch target you have phones that vary in so many different sizes you have you know large screen form factors for for desktop you have even small netbooks which are still desktop forms but still have you know a small screen you have things like the pixelbook which has a high dpi but still a smaller screen so you know

**1:50** · you can't really predict in all the different ways that your application is going to be running as well as you know we have two in one computers that you know we they may start out one way while your application is running and change during the context and more recently we have passive computing where you can actually you know talk to your application without even using any ui at all or even some minimal ui so for example like this is um you know the lenovo smart screen or

**2:17** · if you're working with alexa or google and just the all the possibilities that your application can be opened up to as well as something that people may not think about it's like well you know why do i need to care about you know a passive computing experience well what about if someone can't see your application and they are they need some kind of accessible uh way to access it well one thing you can do is make your app work in this kind of passive way where you can have this interchange with the user

**2:46** · without displaying any ui so like i did an experiment with my tesla app where i use dialog flow to take all the actions that you can use to control the car and then based on a string input or voice input you could actually control a car through voice this is all in a passive context so for the people that could see really well i gave a chat mode a cool

**3:08** · different way to be able to control your car and also um you know we have folding phones now like which we didn't before we have things like the microsoft surface neo coming out and you know the samsung folding phone and there's the razer fold there's so many different uh types that we didn't expect as well as you know notches and whatnot but i think flutter does a really good job so far with building us the fastest ui toolkit that we can use to create these experiences so

### The Solution

**3:40** · first thing that you may do when you're building an application is you may start writing just like okay here's my desktop application here is my mobile application here's my you know my special admin application and you start to really like um silo your application across different projects uh the problem with this is you know you start having so much duplicated code so what are some

**4:05** · things that we can do to fix this first of all we need to create a screen to stand on its own an application should be able to be dynamic to the point where our screens are almost like you models and they only change based on the things

**4:22** · that we provide them we don't want to have these so much business logic inside the screens that then we can't use that widget in another context because you know i used to do that all the time but then i realized that my screen just may go in so many different ways that i wasn't expecting when i originally built it next we we only want to use the break points that the parent gives so this is you know with the constraint

**4:47** · kind of layout and flutter instead of using the bottom up approach we could just say okay i'm going to give my my child this max size and then the child what it does is it just tries to be as big as possible and will change its layout depending on what its parent is the nice part about this is you can create this really complex layout that is it's self-responsive

**5:10** · internally so you can have you know a master detail scaffold with a nested master detail scaffold with a nested master detail scaffold allowing you to have like multiple column layouts for having these list views but then as you change the screen size you can get a mobile and tablet size experience

**5:30** · next we also want to send events up and date down i this is pretty um you know apparent but uh you know we may not think about this when we're first building we just may want to start with set state and we start to have this kind of almost spaghetti code and what you want to do is you know redux does this pretty well um except it's only a one-way data flow

**5:51** · but here we just use callbacks to send okay this this thing is pressed and then i'm also presenting this data if you do it this way this is very much the kind of view model approach but it allows you to reuse a widget because it's just a dumb widget it can it can be in whatever context it wants to be in and you can wrap it in a smart widget which is um you know has the loading the network library but the the widget itself that you're wanting presenting you want to have be as reusable as possible

**6:22** · as well as we want to save our breakpoints in a single location uh this is also something i had to learn the hard way is you may just want to like set okay let me just set a constant for tablet breakpoint and you go to another file then you have that some other different types of breakpoints and then you start to like really mix and mingle um all your break points but if you have a either a class or just a single place to put that it's really nice to be able to modify them all at once and we'll see later on why that'll be important as well

### Example

**6:50** · so here's just a simple example we have a mobile view on the left and a tablet view on the right things that you may not think about when you first built this is okay well the listview is shared across both of them we have a detailed screen that's only present on the tablet version

**7:07** · and on the mobile one we're going to push to that detail screen the floating action button is going to be a different location but looks like the app bar and all of this stuff are still the same so looks pretty good um but i think we can do better so what what's the code that actually does this first of all we have just a simple um

**7:26** · layout builder that will on the tablet breakpoint return the tablet size and a mobile size for the other one but what are the trade-offs with this approach because there are some advantages to doing it this way and we'll go over those so the cons are

### The code

**7:41** · that you have this duplicated ui code every time that you're you know you're writing this it's going to start to really duplicate like your screen because you're going to have two different list views and yes you can internally um you know save those out but there can be start to be states that your app can be in that you may not expect um it's really hard to refactor so like if you want to you know change the listview for example you have to change it multiple places and maybe the way that the selection context um

**8:12** · and stuff like that uh different ui states so like if you're on the mobile screen and you're on an ipad for example and you resize up to a full screen then it's gonna have a different state because it's gonna have a different item selected as well as it's hard to test because mainly because the duplicated ui code so what are the pros

**8:32** · to this approach because there are actually pros um first of all you have separate functionality if you did want to have like okay this is my you know desktop screen and i'm just gonna optimize it for desktop and nothing else and then doing the same thing for tablet mobile it's a quick solution because you can just set a breakpoint and then return a new screen it's a clearly divided ui meaning that this is desktop this is mobile this is tablet and also you can you can kind of start

**8:59** · to sort out like the advanced and basic features so you can have almost like flavors to your screens that you're wanting to present so what is an example of an adaptive layout so first of all an adaptive layout is going to change dynamically depending on the

### What is an adaptive layout

**9:19** · parent that it's being provided so here we have a list view that will you know navigate to the the details screen but then on a tablet version we'll select that item in the list view so let's see that here we can tap on it and then great um so but how do we build this because um right here we're only using one list view and only one detail screen so how do we make it work on both so this is where i'm coming up with

### Adaptive Lists

**9:47** · adaptive lists and if you're coming from ios this is should sound pretty familiar because this is what the master detail scaffold is all about what we want to do is pass the selection context up meaning that when you tap on the item in the list view instead of doing something right away we're just going to send it up to the top of the widget and let the the parent decide what to do with that tap we want to push to the detail screen

**10:12** · when we're on a mobile device but then we want to show the detail screen when we're on a tablet device as well as we want to have a builder for the selection because we want to return the detail screen with new data each time that a new item is selected as well as we want to you know we the detail screen doesn't really care about the break points of the parent it only has its internal size that it um it is displayed upon as well as the

**10:40** · adapter screen can take multiple options for layout so it can be used in other places we can you know just literally drag and drop this thing wherever we need to as well as we have one detail screen and one list view this is really important it means that we don't have any duplicated code so let's just look at some basic code to um see what we would do in this context for this adaptive list

### Basic Code

**11:05** · um so as before you know we just have our our parent widget but let's let's look down so first of all we have the default use case which is our adaptive list which shows we want to you know not automatically imply the leading but that's for the app part we want to just when it's on a mobile setting we just want to navigate to the detail screen pretty simple all we have to do is pass a selection context of the contact that is um selected and then push but then for mobile what

**11:35** · we do is check to see if it's greater than tablet and then on the um you know for 300 pixels of the screen we're gonna have the adaptive list uh which will have a floating ax action button location changed uh which we can modify and then we just updating a value notifier with the new selection and then on the rest of the screen what it is just a value listimal builder which takes that selection context and just you know shows the detail on the screen with those contacts keep in mind um the detail screen here

**12:06** · is the same one but just with uh different settings and so the nice part is you know we don't have to duplicate anything everything is nice and dry next i want to talk about interaction ui because this is something else that changes across uh when you have a cross-platform framework so first of all um you know desktop is going to have a

### Interaction UI

**12:31** · different experience than web and web is going to have a different experience than mobile and you even have these weird you know kind of crossovers where you have like a mobile web experience which is kind of different than the native experience um and you know some examples of that are like you know on ios you expect to see like an ios alert dialogue on web you expect to see like web alert dialogs and then on desktop you know it's depending on what you want

**12:56** · to do but um what i mean is it's not the same experience everywhere it's customized for the platform you're running on so uh one nice thing that i've always done in my applications that i try to right out of the gate is just try to build for cupertino in addition to material because if you're doing this and for those that are not aware cupertino is the apple and ios style guide for creating these

**13:21** · widgets which flutter has a great you know library of them but by doing this you let your ios users feel at home as well as your your android users now of course there's other design languages too and you can implement as many different ones as you want but um some easy ones that you can get right out of the gate is any time that a flutter widget supports dot adaptive definitely use it so like any time you have a switch or slider or i think there's even like

**13:48** · switch list tiles and stuff like that and all these allow you to have internally under the hood the cupertino for apple devices and then material for everywhere else we want to change the snack bar location this is another easy win but like you know like on a desktop you don't want to have the snack bar be like the full width of your screen that would be kind of crazy instead you want it to be just you know a small normal size snack bar in a

**14:12** · specific location same for the web you may also have a different behavior on web where you don't want to just to show it and dismiss it you want to let the user close it where on a mobile device you do want to have it dismissed and so there's just like little nuances that we got to be aware of as well as we want to have a a full screen dialog versus a pop-up so like on mobile device we want to you

**14:32** · know just show a full screen dialog we don't have enough space to be able to do much more than that but then on on a tablet we want to have like a dynamically resized pop-up that possibly can be dragged around because this is something that the user is expecting and if they don't see that they're just going to see all this white space and be kind of turned off to that as well as we want to

**14:53** · take advantage of the extra space just as before because you know we have you know it's you know when you're building this application for desktop you know people can have their monitors really big and there's so much white space that just it makes your app look empty and unfinished so um

**15:10** · you need to look to ways to find how to fill that space in a way that makes sense and also is good for the user and you can also show a lot more on the screen so especially with the latest in material design there's a new density layout you know key that you can add that allows your your ui to change accordingly so like if you're um for example on a desktop you can have it more dense but then on a tablet less dense

**15:36** · as well as like we can think about you know ways that we can multitask so like on desktop we can actually show multiple windows um as well as the web you may your app may live in multiple chrome tabs or you know regular tabs and it's something that mobile doesn't necessarily have but is still a very important behavior for your application and if you're curious i do have a demo on how to do the multi-window thing you can check it out on my github but it is possible with flutter and it's just it's another way to take your application to the next level

**16:07** · so let's look at like just the a poor experience on the tablet so first of all when you're when you're on a tablet view you're just going to you know have a um a full screen pop-up and it's just going to take up the whole screen and this this looks really bad so um

### Tablet View

**16:22** · let's just see what that does under the hood well first of all we just have a settings icon um which then will show or how do we fix it actually rather this is we're going to have a dialog that's going to show an adapted dialog with our settings screen in this this adapted dialog will actually internally wrap um our responsiveness for it and our fallback is always going to be just showing a full screen dialog of the settings screen so let's see what that experience would look like well we have a a nice settings dialog here and uh

### Demo

**16:55** · like i said earlier all these demos are available on that link but we have like a nice responsive uh modal dialog that will then if you if you go too narrow or too shallow it will actually go full screen again as well as if you start with a mobile device it will stay in a full screen context this is pretty powerful because it allows us to use existing widgets and screens in a way that makes sense dynamically because you know just because it starts off in a a desktop you know view size

**17:25** · doesn't mean it's going to end up there this is just an easy win that we can do so the adapter the adaptive dialogue under the hood is actually pretty simple and what we do is we just check to see if either side is less than our break point we want to

### Adaptive Dialog

**17:40** · return the child otherwise we want to center that with the dialog size that we we have predefined with an aspect ratio widget um and in the child which will then um shrink it down to where we need it so this is really powerful it allows us to have just a simple dialogue we just pass a child in and we can make anything responsive like this next we don't want to forget about dark mode yeah

### Dark Mode

**18:06** · it was it was fun trying to figure out how to ways to support this before flutter officially did but um yeah this is something that is really important because you know you may think well i'm never gonna use my app and dark mode like light mode all the way but um the the

**18:22** · the side the other you know argument to that is you know if you have trouble seeing something your app needs to perform in you know high contrast settings um and one of the ways they do this is usually they invert the colors and so you know this is very important because we need to make sure that we're not building for dark mode just because people want dark mode settings but also for accessibility reasons so that people can you know use your app in as many ways as possible and the user should be able to control the setting but it's not always required

### System Mode

**18:52** · flutter now has a system mode theme mode setting where you can actually set it to system and then basically if the device has dark mode on it will automatically switch the dark mode theme or dark theme that you have in material app otherwise it'll go to light theme so these are both you know very important context it's just a quick demo where you can have you know just the colors if you look and see like like the reds are just slightly muted and we have different hover effects as well as shadows so um yeah definitely add dark mode

### Platform UI

**19:25** · next we also want to build for platform ui so um in addition to interaction ui we have platform ui and this is like so uh mac os linux windows ios android and web these are the specific contacts and domains that they exist in and how do we build for them this could also extend to things like you know if we're building applications in vr or if we're building applications in the watch how do we these are all the platform specifics that we have to fix and we definitely want to make each

**19:58** · one feel at home so uh one simple thing that a lot of you run into when you first run your application the web you're like wow everything that i you know my application is running but then like you know why don't i have like urls um to be able to like link to anything and that's because you have to set up your application to support um these various contexts so one nice

**20:17** · thing is if you use named routes on flutter or on generate route you can actually take advantage of this so if you're using everywhere navigator pushed manually material page route in your application you're not going to be able to take advantage of this put all that logic into on generate route and you'll be able to handle this you there's also something that's kind of like different on the web that you may not be logged in when you go really deep into a screen

**20:44** · so like you know you may have a huge url user you may need to lazily load the user in something that may be different than mobile and of course this depends on the application but just you know just be aware of it as well as you know on desktop we want to support menus

**21:00** · you know this is also really powerful it allows you to have a file context to be able to like you know support keyboard shortcuts shortcuts for that but also just you know the user some users just love browsing menus to see what all the application can do

**21:15** · when you have something selected or you know just seeing like a quick way to create a new file so one easy way to do this is to use the menu bar package that's in desktop embedding and then you can just literally do like command in and then now you have a shortcut for creating a new file like if yours is a document application so this is also pretty important

**21:35** · as well as we want to you know mobile we want to support url schemes so like you know if our application runs on both the web and mobile you know if they click on something and it's the same url scheme it'll actually open up the mobile or desktop application so this is pretty powerful we also want to support native apis as well as you know using established patterns out there and you know like i said before for apple devices you want to support cupertino when possible because this allows the users to feel at home

**22:04** · and the same goes true for material design you want android users to feel at home because not every user knows exactly where to click and you may have this fancy design on dribble but then the user has nowhere i know where to touch and uh that's just that's something we want to be very mindful of so here's just a simple example we have the settings dialog but we have material on the left and cupertino on the right and if you see none of this is actually duplicated we're using just adaptive stuff under the hood and it allows you to use the same

### Native Widgets

**22:36** · widgets in both contexts one of my very early packages that i made for flutter was called native widgets which did this under the hood i um i wrapped all kind of widgets and did both the platform implementations under the hood so this is just an example of something you can do to you know reuse and make your application feel at home wherever possible

**22:57** · adaptive ui doesn't have to be spaghetti code i know it can seem like a lot but it's really just about finding a pattern and sticking to it because you know things are going to change um you know new paradigms are going to come and go new devices are going to come and go but it's about building your your application in a modular way that you can you know compose it together so i think that's really important as well as we want to have like dynamic layouts um you know we want to build a layout that the user can control so think about something like vs code for example you know every time

### Finding Patterns

### Dynamic Layouts

**23:29** · you open up a a file in vs code you don't just have like a predefined location the user can drag that around and put it in separate you know tiles they can make multiple windows they can have multiple tabs and it's all up to the user and this is where i want to talk about giving control to the user for the layouts you know we build responsive layouts and we have to

**23:51** · predict in as many ways that they can be used but then also we can also hand that control over to the user to then let them take it even further because a user is always going to have some window layout that's going to make sense to them that not every user is going to like and this way you can cater as many people as possible we can also let each window have a full screen context and the

**24:14** · example i'm going to be showing is a golden layout library that i found that um i recently rebuilt for flutter so let's look at this you can go to their website i'll have the link on the repo but basically golden layout is this thing that existed for web and it's a it's a window tiling library there's other frameworks that do this too but it allows you to take a tab and be able to you know resize it to any place you can put it down in any location you can close tabs you

### Golden Layout

**24:42** · can maximize tabs and it's really powerful um so one thing about this is like just like vs code like the the application doesn't set in a rigid way where all the windows can go this allows the user to based on their device screen and see it even supports pop-up windows but based on their device screen they can customize it however they want

### Golden Layout Demo

**25:05** · so how can we achieve this in flutter so like i said i created a library called golden layout and it does exactly this it allows you to in a very quick way be able to let the user you know specify where they want their tabs they can drag it anywhere they want and of course this is a i think the package was released like less than a week ago so there's lots of stuff to be able to be improved but you see you can drag a tab from any one tab to another tab and this

**25:33** · of course is using like a tree data structure under the hood but you can resize both vertically horizontally they all can handle uh wherever you want to have the tab live in and of course you can quickly close them there's even ways to prevent a tab or window being closed but i just want to show you this is this is just a simple way with just like just widgets under the hood to be able to give your layout anything so if you have like a complex desktop layout or like

**26:01** · enterprise application that has a bunch of dashboards i would definitely suggest looking at this library because this will let the user have total control and you can kind of take away like some of the guessing game that goes into creating a complex layout put it on to individual windows and let the user just select those windows and then a nice way is they can kind of build their own layout as they make sense to them and of course the nice thing about this library too is the fallback is it opens

**26:28** · up everything in a new tab so by default you just have like one big screen with a bunch of tabs across the top just like a regular web browser so even if the user doesn't want to have multiple windows they can still have a very reusable way because the tabs are scrollable so

**26:44** · another thing another package that i recently built was storyboards and why would we want to do this first of all well we want to be able to build all your screens at once i know when i'm developing application you may start with you know the login screen and the home screen settings screen and then the about screen and you have like four different screens you're going back and forth between them and sometimes you can like start to forget about screens you forget that you may have changed your you know theme methodology you may have changed like the way things look over here um and then just in terms

### Storyboards

**27:15** · of consistency you need to be able to watch them all at the same time so uh one thing you do is you know edit your theme and watch all your screens update at once so this is really nice um with support with material design you can just change the primary color and then everything changes as well as you can work with dummy data so i i have the ability for you to add

**27:35** · custom screens and custom lanes to be able to say okay i want this you know widget to be shown in a testing way to show this dummy data so then that way you can you can have your protected screens but then also show them in this dynamic way as well as you know it supports all your routes in your applications so this is just another nice developer tool as well as we can change our constants in one place and observe what breaks so um you know css

**28:04** · you know would have this too where you can you know just change one line of css and it'll change some stuff but uh you know you can go to your content file and then because it supports hot reload you know all your devices will change so you can change like your your break points and then you can see what flexes

**28:20** · as well as you can test on different devices at once so you can have the same screen and multiple screen sizes so you can make sure that you want to support specific specific sizes and make sure it works looks good on there so uh one thing for me was you know always having to test on the iphone 5 because at the time my boss had an iphone 5 and so that was always a pain as well as you know being able to support uh restart so i actually have a button now that will restart your application which is pretty nice so let's look at

**28:48** · example uh here is the flutter gallery app running on a storyboard as you can see on the top app bar it actually picks up your theme and the storyboard will change depending on what you have there so like all your colors and your fonts and everything so what's nice about this is see you can you can start to pick up so many things that you wouldn't have been able to pick up when you're testing your application especially if you're like a qa engineer and you need to be able to test multiple screens at once and say okay are all these things look correctly

### Storyboard

**29:18** · you can do widget tests you can do all kinds of stuff because this way you can basically multi-thread your testing if you wanted to but it allows you to you know make sure that you know everything looks correct uh because when you change something you have to go okay let me go to the login screen let me go to the about screen let me go to the settings screen and of course you can do gold and file testing too what you need to be doing

**29:41** · and all that but this is just a nice way when you're building something really quickly you can have it all up at the same time and of course the link for this will be in the description so something else i want to show you real quick before my presentation is up and this is my flutter editor i've been working on if you've been following me on twitter maybe even seeing a little bit of this but um making a ton of progress on it so if you want to try it out for yourself it's flutterweb.app and there's the link there so let's go ahead and check it out so one interesting thing that i've been

### Flutter Editor

### Widget Studio

**30:11** · working on is a widget studio allowing you to have you know a a storyboard kind of context for you know creating widgets as you can see the cursor is actually changing and this is because under the hood you can change depending on if you have the spacebar or command key selected as well as you know you have you can change your icons you can have a pwa manifest generator as well as

**30:32** · being able to open up the project directly in vs code so this is all running on the web and creates a real flutter application so um let me just let that gif restart but yeah what's cool about this is it allows you to work really quickly in a prototyping way to be able to add multiple screens and edit your files on

**30:53** · desktop it actually can compile your flutter application but yeah here we see we're using a native color picker which is really nice and it's just like a really you know dynamic way here we can easily drop and create widgets with just you know really quickly which is really cool and then you can even control context like when this button is tapped launch the screen show this dialog and

**31:16** · all that kind of stuff is supported so yeah like i said make sure to check it out in the link below so what's the conclusion well first of all you got to embrace the change and just know that the devices we have now are not the devices we're going to have in the future things are going to be

### Embrace the change

**31:33** · different you know we're going to have a new device that's going to come out next year that we're not predicting and it's going to change everything we think about design and layout and then you know things may also change you know like there's different you know there's desktop neo for example is a really cool desktop thing that looks into the future to see like how can we work with you know experiences fuchsia is another example you know with um desktop and how do we change the way that you know we build our you our uis like

**32:00** · because it doesn't have to be static there are the thing is also we don't want to just like alienate our users because something changes we want to make sure that whatever we're doing makes sense is not too drastic but is always making progress so first of all create a pattern and stick to it this is really important

### Create a pattern

**32:20** · whenever i start a flutter application i will whatever pattern i'm choosing at the time like for right now i'm i always have a very specific folder structure i have a um two different types of libraries that i go from i either go with a a uh what's it called a flutter more and um and basically

**32:42** · shared preferences approach where i have a relational kind of data as well as i also have i've been using more recently freeze and provider in addition to value notifiers to be able to have this dynamic way and it all depends on the data first of all but whatever pattern you stick to make sure to go and finish your application with that pattern it's always you're always able to refactor but i would suggest waiting to refactor until after you've released the application your app can get this like infinite cycle of just constantly changing it and i know

**33:12** · because i do this all the time but is if you wait until after your release then you can refactor write your tests make sure that whatever your refactor doesn't break your existing stuff as well as we want to extract widgets and components wherever possible um a pro tip is if you were building your applications build it with as much ui on the single screen as once without using methods only after you finish the screen then start extracting because it'll start to get really complicated with all the callbacks going up and down

### Extract widgets

**33:41** · but yeah definitely do this because that way you can then use your widgets in wherever you want a good rule of thumb is your only import should be flutter material or the the core library so dart math and stuff like that because if you do and you only support those not only can you you know reuse them but you can make sure that they are

**34:03** · logic less meaning that they don't depend on anything else besides flutter and then also you can use you know you just pass the data and then let it present we also want to send all the actions up if we want to reuse the screen this means passing up all the contacts for you know on tap on long press whatever we want to support for that widget

### Reuse the screen

**34:22** · as well as we want to pass down the data so this means every time that the data changes we want to have the widget rebuilt as well now you can have intermediate widgets that are smart and do the logic like i said before like if you have a widget that just wraps up the stream builder and does everything we want to make sure that um that is done in a good way because

**34:44** · when you when you have that that layer and that separation then you have like a kind of view model approach where you know you can change out the widget without having to change out the model and the logic as well as we want to write dry ui code because as with everything the more code that we write that is

### Dry UI code

**35:01** · duplicated the harder it is to test and the more places that we got to change it so make sure that when you're doing this you can build your application in such a a faster performant way that make sure that we're not you know duplicating anything as well as you know just building an application

**35:16** · that can run in multiple contexts you know like i said before not everybody builds it the cross-platform mindset in mind but this is important because we have such a powerful toolkit which is flutter under a hood and if we're not like taking advantage of it then why are we using cross-platform framework if you're only using flutter to build like an ios application or an android application and i feel like you're only taking like advantage of like five percent of what it can offer you so um make sure to uh go to this link if

### Outro

**35:44** · you want to see the examples make sure to follow me on twitter github and of course you can reach out to me on email um and thank you so much and uh yeah and if you have any questions let me know excellent thank you very much rhody very very interesting stuff you've been working on i'm sure you're a part machine yeah definitely he's the hero