Implementing complex UI with Flutter - Marcin Szałek | Flutter Europe

[Music] so I'm gonna start with a quote from Albert Einstein that says people use only 10% of the brain and there are two problems with this quote first of all Albert Einstein did it sighs at home and the second thing it's not true we use much more than only 10% of the brain however we can use this quote to create another one which is people use only 10% of flatter now why would I say it well when we first pitch butter to our business clients or to our CEOs we say how easy it is how fast it is that we can create and cross-platform applications with unique customized view and then we can show some real real examples like Hamilton up or like reflect Li which are those very nice unique applications that show what you can do with flutter however when we start doing our flutter projects they really often look like this and this is not like ugly or bad those are really nice applications and they go well with the material design guidelines yes we use those scaffolds lease tiles cards and so on but I wouldn't call them like beautiful applications and for sure it's not taking flutter to its full potential and I don't like this state my name is Masha shalwick and I am flattered developers since alpha release and besides doing lateral applications for business clients I also do design challenges design challenges basically what it means is that I find some nice designs in on the Internet on the websites like dribble and I try to implement them in flutter to make them real apps and the tricky part about is that designers when they post such designs they usually are not meant to be implemented they're just mostly to showcase the designers skills however in flutter we actually can make those designs real we can make we can put them in our applications and today I would like to show you how to do it so we will start with something I created for this presentation what I call the triangle of complex UI and we will have three classes that are the what I believe the core of most of complex you eyes of most of those beautiful designs first class is stuck now stuck is a very simple class it is used to put one think one widget on top of another widget and to you stack we just have a sack with children and provides an image for example to have something like this you have provided a text and then we can use something the widget called positioned which allows us to well position our widget wherever we want and it is very important because positioned widget is very powerful it allows us to actually put the widget anywhere we want and this is something you cannot achieve with like rows or columns so this is the stack the second widget will be transform transform is a widget that helps us change the way another widget is painted so for example if we have an image like this we can use chance from duck translate provide an offset and then we can move that image or we can use transform that scale provides an on some scale and it will further on to shrink or we can use transform rotate and with the provided angle we will rotate our image those are three basic constructors of transform and there's also the default one which accepts a matrix now if you don't have any mathematical background background don't worry because matrices in flutter in dart I should say are really really simple and you don't need like deep knowledge of what's actually inside which I will show you in a second so this is like the very basic matrix matrix identity and which creates which basically does nothing this widget will be like wrapping with a container however what we can do we can for example an ad translate method to move our image our widget to the right or we can use rotate method to rotate our widget now what's what's important is that order of those operations matter so if we here we have the image in this position but if we change the order it would end up in totally different place so it's worth remembering that order of those operations matter now the other important part about widget about transform is that when it takes place and it only takes place before painting so what it means is that if you have some transforming like rotating some our widget in a column it may it may end up looking like this because first flutter calculated and the the height of this card and then we just changed the way it's supposed to paint so we can have things like this so this is transform and the first class is animation controller and animation controller is used surprisingly to control animations and what it means it helps us go from one number to another in a smooth way for example from 0 to 1 and we can use that number to smoothly transition rotate scale change opacity of our widgets to do it we used to usually add single teacher provided set mixed in to our estate class declare animation controller initialize it with a duration of our animation we can call animation for what to start running from zero to one and then in the biz method will use animated builder widget which gets the animation controller gets the child meaning the widget we want to operate on and then we will have a builder method in builder methods we can access the animation controllers value for example here we will use it to undetermined the angle of the rotation and what's important about the builder method is that it will be called every time an animation controller changes its value so it will be called very often across the animation so it will look smoothly now all of this and when we run animation control forward will provide such an effect all right so those are those free main classes and honestly like I cannot stress it enough how much you can do only those free classes so stuck transform and animation controller and with these free classes I believe that you're all ready to start implementing complex device do you think you're ready yeah yay thank you so prepare for our first complex design well obviously it's a very complex it's our shutter hello word up however I did customize it a little and I've added a custom drawer and the driver looks like this and we can also have the dragging behavior so this is our drawer now when we approach design like this what should we do first at start we should start identifying static elements basically we need to decide what actually matters in this design and what is just a placeholder that can be replaced with any widget so in our example we can look at our design of something like this we just have two widgets with this animation and when we have it simplified like this we can think about what is actually happening in this design and we can notice that blue element is for sure behind the yellow element we can see that the yellow element is getting smaller you can see it's moving right and we can see that the whole transition is smooth now when we identify those those steps we can just try to implement them one by one so let's start with the blue element is behind the element well behind hello this is very simple all we need to do is create our widget we'll call it customer will have two which is my drawer and my child and we'll put them in the stack this will be enough to have the first part done now to have the yellow element get smaller when you come back to our code all we need to do is grab our my child with the transform where we provide scale and this will make our I'm trying to get smaller so we got it done then to move it to the right it's again very simple we just need to add translate and then it will go to the right and to make the transition smooth we need to think about animation controller so we will add single ticket products at mixing will declare animation controller initialize it in its state will provide a method toggle which will videos just use for to open or close our controller and then in the build method all we need to do is to wrap everything in the animated builder so it will be called many times and then we can bind the slide and the scale of our widget with the animation controls value so we will start with some basic values and we will go to the values we want across like alongside when the animations goes then we will wrap everything in gesture detector so we can just like and start and finish the animation and everything together should look something like this now notice that we haven't used any complex widgets which is just animation controller transform and stuck however you can say that this is not actually the the drawer because drawer is not only tapping we also need to handle the gesture behavior to to open it so what we can do in cases like this basically we can see how flatter team implemented there are material design drawer and it is very simple to our just abductor we just add three methods on rack start on rack update and unlock end and then on track start is just to determine if we can start opening or closing the drawer on Jacques update in this method will calculate how big was the gesture I'm user did and based of it we can add it to our animation controllers value and this is very cool trick because when the animation controls value changes we rebuilt our widget because we use animators builder so even though we are not using tests at state we can update our UI and on Jacques aunt is simply deciding if at the end of the dragging behavior we should open or close our drawer and honestly this is all we needed to do to implement this I showed you all the code it was that simple and what's important we used mostly those three things stuck transform and animation controller it was enough however we can take it to the next level this is one of the designs I found it's called 3d flip mini by Mint um I hope I pronounced it right and yeah he took a different approach to the drawer and we can see like this cool effect and we will ignore the guitar or we will just focus on the drawer itself so what can we do first we need to look at like this because this is actually what's happening right we just have this nice animation when you look it's like this then we can find find those elements find out what's happening and what's happening is that we can see that the yellow element is rotating from being side front to being sideways we can see that the yellow element is moving right obviously right we can say that the blue element is rotating also from being a side to being front and it's also moving right to being out of the screen to being on the screen so now let's do it in our transform class what we can do this is the code we had previously will just replace methods we had we've rotate Y meaning we'll create like rotation like this yep will like specify the angle and the animation controls value and what will happen is this now this is not what we had in the design this doesn't even look like an rotation right it is it it is like this because matrix identity actually doesn't take perspective into account it only works on two dimensions so to add perspective all we need to do is one magic line which is specifying 0.001 in a specific cell and by just adding this line the whole animation should look like this and now it looks 3d like now it looks a rotation now to add the transition to the right we'll just drop it we've transformed that translate and provide the offset and it should look like this and this is the whole behavior we wanted for the scaffold now for the tower we'll just use the same transfer method but with the drawer will change the alignment will change the rotate method and we'll change the offset so basically we just change it from like before it goes from front to side now it's from side to front now if those formulas look hard to you what I do is I just try to think about what value I want at the start of my animation what I want at the end of the animation and then it's much simpler to actually come up with the formula and it goes much easier with practice so don't be scared by them you can figure them out and if you put everything together we will have something like this notice that from going from the previous one to this one we only just change the transfer methods these few parameters and have this nice animation and if we solve something like this I assume that our users will appreciate it right okay thank you all right and what's important we still use only those three classes right it's still simple there was no hidden widgets and there's no secret techniques that only appear to you when you have two years of experience it's really that simple so let's try to figure out if we can use this triangle with some other design now the other design is called eyeline survey by mini pom and this is a lot is happening here but what we'll focus on is that we have some questions that are presented for the right user of the app and there are three answers at the bottom user taps the answer goes to another the go to another question what we will ignore in this design is the first question as it would be just too complex to have in this talk and we'll ignore this first animation of the plane going to the leg to its position we'll just focus on first two and questions and the transition between them so again what we will do we will need to figure out what's happening in this design so for sure we can say that the arrows in the left bottom corner are static nothing happens with them we can say that the plane is static although I know there's this glow but this blow can be easily implemented in in flower or in life if you're up to date and so you can say that the plane is static and the line below the plane I'm not sure if you can see it but there's like a small line below the plane it's also static nothing happens there mmm also we can cite the separate question separate pages for each question what I mean by that is that each question is totally separate from a different from a different one so we can just replace the widget here to present another question and the texts are fading in from the bottom as you can see and are fading out to the top and the last thing selected dot animates the top to the plane yeah when user taps the dot goes up so now let's start to implement is it so we will start with a stock and in that stock we'll put three widgets our icons plane line and page now arrow icons very simple we just have positioned to left bottom corner and the column with two icons that's it plane we also set position back to top left corner and we just have an icon with a plane line is also very simple we just use positioned with some width and the container with a color so those three are done and like nothing nothing exciting there so let's go to the separate pages for each question when we look at those questions we can see that they just have some texts text you can see the number the question and the answers and what we can do and like for now let's forget about the animation that just focus on what's displayed so what we can do is we can just create a widget that accepts number question and the answers and then in the built method we just have a column with step number a step questions which are just the text with some padding's and spacers to put everything else on the bottom and then option item for each for each answer and the option item is just a row with a dot and the answer and there was like nothing as exciting here that's all so we'll have pages done for now now texts are fading in from the top from the bottom and out to the top and for some of you it may be difficult to actually see what I mean is here like going out the top and are going in from the bottom so the happy behavior looks like this yes sometimes we're going out to the top now what's also important is that each text is animated separately like with some delay so yeah this is the behavior now how to do it will create I call it a item fighter all right with a child the child will be like any text we want to animate then in the state class what we'll have will have a position which will basically be one if the element is below and minus one when the element is above like the baseline with animation controller and we'll have animation the curved animation is just to make the animation look more smooth and then in the build mode will have animated builder with that text we want to animate and here in the transform that translate we will move this text depending on the position and the animation value either from below its base position to the center or from the center to the top and we'll also use opacity so that below the base position the text will be invisible and when it fades out it also will be invisible then we have two simple methods show to show the text and hide to hide it and in the page state we need key for each and of those texts so we'll create a list of five keys and then on in each state for each key we will show the text with a small delay this way it will like well it will just be one by one but not all at once and then on the top we'll do the same thing but we will start to hide those elements and then with all those texts we'll just need to wrap them in those item fighters and provide those keys and that's it and each look like this now what's important you have seen all the code to achieve it alright so this is done now selected dot animates the top and this one is pretty tricky because our dot was in a row and now to get this dot out of the row and send it up to the top it may be very difficult to do however what we can do is we can actually put another dot in the same position as the one we selected and hide the selected dot and then move this dot to the top and then make it disappear this way user will not notice that this is another widget because we put that in the same position however it will appear like the dot is going up and it will not totally mess with our code so this is the dot we put it in the place of the selected dot and we animate it to the top and then we get rid of it okay so normally when we think of like positioning dot in the specific like place and then move it to the top we should think about tagged and positioned however we can use positioned also with an overlay widget now overlay widget is a widget that allows us to put a widget on top of all of all your application so for example if you have like progress indicator that you want to lock the screen you can use overlay to just put it in the front and it's very simple so what we'll do we'll have animate dot function with the start offset which is the offset of our selected dot then we create overlaid entry with the Builder method and in the Builder method we'll have our animated builder which we all know how it works and then we'll have positioned now in this position we have left which is like a constant value because it moves only vertically and in the top we basically interpolate between the starting position and the ending position based on the animation controls value and that's it then in the then we need to add this entry to the overlay start the animation to go from the starting position to the plane and after that we just remove it yeah and if you are if you don't know how to take how you get the start position because this is something like I just had there all you need to do is add those two three lines and then you just get the position of the current widget if you don't know how to do it still just google it it's up front and this is what we got say we have the dot animating flat top and it doesn't even like user will not notice it right we have all this animation now I know that there was a lot of code and I know it might be a bit and tiring for you however and what I meant to show you is that you saw all the code to get those designs I didn't hide anything from you you all now know how to do them and to do them we only use those three things stock transform and animation controller so since we all know this now let's try to go to some other designs and use what we had previously so this is one other design I found it's called buy tickets but by DL D P and what we'll focus on is only this bottom sheet that animates to the top with those nice images coming there hmm so this is the design this is the effects we want to get and first think you might be worried about is alright how to get this sheet to be drug able and go to the top and then scrollable and how to manage everything it looks very complex and it is very complex because first time I did this design I implemented it myself and it was hard however I believe something like eight months ago chapter team in their widget of the week series showed us Joe Gables clay which basically handles everything about it so you don't have to worry about this sheet we got it what we have to worry and worry what Frank what we have to think about is how to get from this to this or to be more specific how to get position those elements position of those elements to get in these positions and these sizes and also besides figuring out their positions you need to figure out how to actually smoothly move them from one to the other now let's start with the starting position and what we can do is we can just use that thing we used with the animated dot we just can get the position from the offset and it will work however very often you can actually calculate the position based on the code you written for example here you'll probably know that the margin here will be 16 pixels and then that the image will be 40 pixels because you specified in the code and then for example you can specify that the four pixels will be between the images so then for each element if you just know their index in the list you can actually calculate its position from the left so we have the starting position now it comes to the well starting position from the left and it comes to the position from the top even also just specifying assuming we are all using stack because we wanna use stack so you have the starting position now it comes to end position it works exactly the same we can just specify it in our code we need we don't need to find it we just need to read our occult yes and then for each we'll have we just have the top position so we have starting position and we have ending position now all we need to do is figure out how to interpolate from one to another and luckily and that draggable scrabble is very hot with it because you can have screw controller throw controller in the busier method that this widget gives us then in this builder method we can use animated builder and it's funny because animated builder actually doesn't require animation it can get with any listenable and scroll controller is one of those so basically the guide was called the gable scrabble sheet gives us scroll controller which we used to for animated builder and then in the builder method we can actually calculate the percentage of the of the scroll so what happens now is that we have value from 0 to 1 which is very similar to what we have with the animation controller we have the builder method which will be called every time scroll controller changes so basically every time any animation happens like any behavior drug behavior happens so we can interpolate between starting position and the ending position just as we did with the with the dot with the flight survey so yeah so everything like this will look like this well text you just need it's very simple to add this text you will you can find it in the code at the end but don't worry about it it's very simple yes so now because the gable skadoosh it gives us the percentage of the of the opening we can easily interpolate between starting position and the ending position but ok it does work however we used only stock and stock doesn't scroll so if there are more elements user cannot go cannot scroll them and how to handle it is we need to use the same trick as we used with our dot what what I mean by that is that we need to replace our stock with the listview by the end of the animation and we can do it in the same place because we specified the position so what we'll do is we'll wrap the ListView with the opacity and we'll just say show ListView only when the animation only when the sheet is opened is fully opened and then we'll have that the elements from the stack will show them and let will show them only when the sheet is not fully opened so what it means is that when we scroll is all stuck it's all stuck and when we when we reach to the top we just put ListView inside of this and it will work believe me it will work and it's very easy it's honestly very easy you you know how to do it you right now know how to do it yeah so the last design is something a bit different because mostly we are focusing on the mobile designs because this is what we use fatter for mostly however you can also try to like create complex you ice for your desktop applications with flutter or for your web applications if flutter if you're brave enough so this is another design I found it is called go to Egypt by ashraf alchemy I have no idea if I pronounced it right and what we'll focus on in this design is the parallax animation at the top you will see the pyramids and descent that will go in a different speed yeah and they created this parallax effect I will just let you see it one more time or not yeah so basically it's a parallax effect and we can do it on web how to do it and we'll start with our list view of the elements we have on the web page we're up this list view in a stack because stacks are awesome and then we add some positioned items now those positioned items will use offset that was that is provided from the scroll controller of the ListView so when you scroll the scroll controller will and provide new offset we'll call something like set state and we'll use this offset in those positions now we'll multiply this offset by a different numbers so when users cross each position of each of those element will change but in the other but in a different speed so it will create a products effect because we can put one element overlap with another now to make it work we'll need to remember to add a empty container as a first element so we can actually see what we can actually see this products effect and the effect is this this is in flatter you can see that the back icon yeah and this is the products effect I showed it on the on the web but obviously you can do it on the mobile as well and if you see those other animations those are the same as we use in that text showing in the airline service yes because this or just the those are just the transforms that we like run on in its state yeah so if you want to actually see if it's possible of there's free tea but it's deployed on feeder that IO / / Egypt so you can see it so we had this design we had all we have those three designs and you all know now know how to implement them I didn't show you a 100% of the code but you've seen all the hard part or the difficult stuff and well what I want you to know that they're not that hard if we just look at them try to think about what's happening try to break it down point by point and they just implement them they all start to get pretty easy and once we figure out what's and what's happening there we just need to go to our triangle of complex UI with stark transform and animation controller and just implement it now if you want some more you can follow me or by my margin shalwick and Marcin underscores Alec on Twitter you can email me on on the email if you want to see the source code and the examples and the full ups its feeder that I also - complex UI it's alder so feel free to go there and see the whole code the whole working stuff and right now what I want you to do - like to have from the sock is basically go nuts go to your company tell your designer that you can now implement everything he wants to do thank you [Applause] do you have any questions well right keynote thank you for the talk my question is so I've seen in the code that you are hard-coded most of the values I had to try different devices or responsive UI for example if you have this images that you show one after another on some screens might be visible yeah so in general when I do those designs I usually like hard code those values because it just makes things easier but obviously as you said on other devices it may look different ninety percent of the time you can just bind those value with for example width or height of the screen yes so if we had those images and I said 16 pixels 40 pixels 4 and so on you can say 5 percent of the screen ten percent of the screen and so on and you can do it I don't do it more in those in those examples because it just adds more complexity to to them I believe on my website feed of the piyo there are other examples of such designs some of them I have a little of like binding with the width so you can do it it just makes like it just produces more code that's the answer your question yes are you sure all right I think there was all right so you'll be next Hey very good presentations thank thank you on the part that you were showing the Paula yeah the rotation effect is a the two containers are always in a stack that are rotating yes yes yes those are still like it's all happening in a stack you mean the containers the drawer and the scaffolds yes yes so yeah I mean I don't they're still in the stock we just drop the transforms we just drop them in transfers and yeah only transfer service but they still stick in the stock yeah and a quick one also on the last one on the screen is really neat neat trick that you do the animation of scrolling and then at the end you hide one and you continue the list the question is does this Chrome continue or or I mean if the adjective 1 yeah the last it's all the sound oh yeah when you have the the not the last one but the previous one that you have a row and then you start scrolling asleep you will continue yes yes it was in the yeah you yes basically you can do from the stock you just do one thing and it will scroll is we scroll because actually what what was happening there is that we were actually scrolling the list view you just didn't see it at the start and when when we get the sheet to the maximum then you just started to see it but it's also it was always there all right I think it works yeah okay yeah thank you and the question is is it possible to stop animations and the second one is it possible to join animations to the system take care about the velocity okay so the first question is what is it possible to stop animation yes yes something yeah and is it possible to join two animations between each other to the system cares about velocity yes what tool to stop animation it's very simple like I believe there's a method in animation one two three all right to stop it it's very simple you can have multiple animation controllers the important part is that then you change single ticket providers that mix into ticker providers that mix in and yes you can for example add the listener to one animation controller and for example say that after this animation ends start another one does it answer your question all right if it doesn't then come to me later and we'll figure out there are guys at the end in the example where you have the trackable potent feed yeah when you switch to the stack for the ListView you use them or post opacity for this yeah y-you could trust have trust replace them does it have just replaced yeah yeah I couldn't just replace them because draw cables cravers needs a scrollable to actually work so basically if i didn't have a list builder and that was this is similar to the question about the scrolling behavior I need a list Vidur to open the sheet so the ListView must be there it's just not visible all right hey that's right yeah all right so thank you very much if you have any more questions oh sorry sorry yeah hi great talk my way so I was able to follow along but until the the set entry point zero zero one that didn't make any sense to me or okay yeah I understand I would be so glad to explain the details however I don't know them well I will just tell you what I know and what I read in the article from what I have it basically if you put this free to zero zero zero one free is the road to use the column or the opposite but it's just the position of this cell and if in this cell you put is very small number it can be different number but but in 0:01 it just provided this exact effect it just provides a perspective I did okay since its recorded I will stop here because probably I will say it's wrong yeah for me it's just a magic line that makes the 3d animations work sorry about that but you can read about the tents and figure it out there okay thank you very much [Music]

Channel: Flutter Europe

Views: 233,085

Rating: 4.9755445 out of 5

Keywords: flutter

Id: FCyoHclCqc8

Length: 44min 25sec (2665 seconds)

Published: Tue Mar 17 2020

Reddit Comments

[u/AndyGas]

This was a really good talk, one of my favorites from Flutter Europe, quite a few "wow" moments.

[u/zanalein]

Complex made simple. What else can we ask for?

[u/justmeonreddit2]

Best talk

[u/UnRusoEnBolas]

That was NICE

[u/OlanValesco]

I've never done any Flutter dev, but this makes me want to jump in and try out some sick UIs!