This blog assumes that you have a beginner’s knowledge in Flutter. Otherwise, dive into to get the basics and come right back!
Now, how do we layout widgets in Flutter? Normally we use a stack, row or column. But what if our requirement is more than that? If we want to arrange some widgets horizontally, we use a Row Widget. If we want to arrange them vertically, we would wrap them in a Column and use Stack to arrange elements on top of another. But we can’t expect our UI to be so simple as that. For example, I was met with a requirement of a circular widget with five equally spaced buttons located on it (check out the image below!).
Don’t worry! We can do it with a CustomMultiChildLayout widget which takes only two arguments.
Now, the important part is the delegate. The MultiChildLayoutDelegate is an abstract class. So, we have to extend it for our use. Override the method performLayout and we can write the code to position items in it.
A point at angle theta on the circle whose centre is (x0,y0) and whose radius is r is (x0 + r cos theta, y0 + r sin theta).
So, that’s how easy it is to create custom layouts in Flutter. If you want to read more about our Flutter experience, check out our recent blog. Flutter has always been our core areas of expertise. So, stay tuned for more similar updates and information exchange!
You can further learn about our Flutter contributions in GitHub.