blog.md

Advanced Flutter Layout - Flow

Flutter provide a wide range of widgets to costimaize your layout and you can find most of them here is this (page) [flutter.io/docs/development/ui/widgets/layout] but if you are like me and you don't wamt to miss anythig related to flutter you propably have seen few interssing names and in this article i will be talking about one of them zhich id the flow wdiget

What the Flow layout in is not

This is just a quick note before we get started if you have a java background you may have heard of the flow layout which usally arranges components in a LRT/RTL flow, much like lines of text in a paragraph but in flutter we call that the (Wrap widget) [docs.flutter.io/flutter/widgets/Wrap-class.html] so the flow layout in flutter is very deffent from the flow layour in other frameworks and design systems

Simple Flow Example

let first start with simpilest example of the Flow widget and after that we will play a little bit more with it:

https://gist.github.com/9d34a16a9385ce92d832ecd331e15a92

the buildItem method return a simple circle with the number passed as an argumt

https://gist.github.com/053b94770562db620304bdd49026f6b4

Now SampleFlowDelegate is where all the fun happens

https://gist.github.com/6405f6e04aa85e7f592e1ef1219cd69b

Run this pice of code and you will see just one item on the screen which is the last one and you are thinking so this is just like a stack , yes somehow they have few similar things like the order of widgets is importnt and that's why we can only see the last item

//image

So Why the Flow Layout

Just one good resaon, it's optimzed for transformation matrices so you can do all kind of crazy trnasformation without fear of losing performance, and that's the key deffenvce from the Stack widget which does all the positioning and sizing durring the layout phase and we can even avoid the build phase {i will talk about that later}

Practical example

let's try to make this layout where you can stack chilredn on top of each other and when you double click on one of them it will expand

//shozw PE1.gif

Step 1 : Stack chidren gradly

to achive that we need to get the size of the currnt child and we can do that easly using context.getChildSize(i) and we ;yltply the height by 0.1 just to get that nice cards effect change it to 0.5 or 0.9 and you will get the point

https://gist.github.com/bf6c2316726c8a17cf92ad66ff72982d

Step 2 : Animate the children

And here the power of the Flow layout shines because the FlowDelegate accepts an optoional repaint argunms of type Listenable which will repint the Flow whenever the listenable notifies it's listeners

https://gist.github.com/bd5653f4b4c89d6ec7b045bf5979daa1

Step 3 : Create the aniamtion

there is nothing specail here and i will link the full source code in the end of this article so you will see all the booiler plate

https://gist.github.com/22ccf6d7416c22cf037db34ac2cedc40

Step 4 : Aniamte on Tap/DoubleTap

just wrap the item in buildItem method with a GestureDetector and set onTap and onDoubleTap like this

https://gist.github.com/9edf3239bde11793eb0288f309479650

and the final step is to pass the aniatmion to the delegate delegate: SmapleFlowDelegate(openAnimation: openAnimation)

perforamnce coparsion

So as some of you might know we have only 16 ms to draw each frame otherwise we will get some frames dropped and that's not a good UX but for most of the time 16 ms is enogfh in modren devices but if we want to make a complex ainmation we will have some defucltis and becuse the flow delegate repaint when the aniamtion tikcs we can earn few milis seconds and this comparision is from the last example

SetState to build when the animation ticks

// pic 1

Repaint when the animation ticks

// pic 2

and as you can see we eliminated the build phase completly here