Insights from Our Experts

Blog image

How to Create Custom Layout Widgets in Flutter

Author Image

Rijaz Rasheed,Associate Software Engineer

Flutter is the most popular UI development framework due to all the right reasons, its cost-effective, record implementation time. It offers tons of features to help us develop beautiful premium finish UI interfaces. The beauty of Flutter lies in its ease of implementation, even for the complex looking UI interfaces such as Widgets. 

How Flutter makes UI development simple

Widgets are cool mini-apps that make an application ergonomically operative. What makes a widget truly appealing is its simplicity or complexity, actually it's both. Should we use a stack, row or column maybe we want some more? How about arranging some widgets horizontally, cool! Let's use a row widget or maybe arrange them vertically, wrap them in a column and use a stack to arrange elements on top of another. 

Nah! that would be too plain.  

How about a circular widget with 5 equally spaced buttons on it, aha that sounds cool, check out the image below. 

How to build such a widget must be a lot of hard work ?

 

Read more: Top 4 Reasons behind Flutter Mobile App Development Popularity

Well Flutter makes building a widget like this (true to the title) a cakewalk, the beauty of flutter lies in the freedom it allows designers to utilize their creative vision unbothered by the limitations of the underlying framework. 

We can pull off the above sample using a “Custom MultiChildLayoutwidget” which takes only two arguments.

  • Delegate - can determine the layout constraints for each child and can decide where to position each child.

  • Children - which is the array of widgets to be positioned. The children's argument is similar to the one used in rows and columns, but the difference is that every item in that array should be marked with a Layout id for identifying that child.

Read more: Flutter vs React Native - The framework you should choose in 2020

The MultiChildLayout Delegate is an abstract class, we have to extend it for our use. Override the method perform layout and we can write the code to position items in it.

Watch the following steps carefully to create a circular widget :

Step-1 The “performLayout method” gives us the widget’s size from which we can calculate the center of the circle. 

Step -2 Since we have to layout five widgets along the circle, use a “for loop” for it.

Step-3 Remember we have created every item with an id attached to it.

Step-4 The size of the button is retrieved using the “layout Child method”.

Step-5 The angle between the item and center axis is calculated using the function “_calculateItemAngle.” 

Step-6 The “position Child method” is called with the id of the item and the offset. The offset is calculated using the mathematical equation,

A point at angle theta on the circle whose center is (x0,y0) 

and whose radius r is (x0 + r cos theta, y0 + r sin theta). 

Step-7 Finally “Layout method” is called to compare the current layout and the old one and return true if a relayout is needed.

So, that’s how we create custom layouts in Flutter. If you want to more on Flutter experience, check out our recent blog. Flutter has always been our core area of expertise. So, stay tuned for more similar updates and information exchange!


Also read: How Much Does It Cost to Develop and Maintain a Flutter App?

Six out of 10 businesses are using Flutter for their business app. It’s affordable and enables quick development. Get in touch for a FREE consultation.

 

I Need

Help for