.png?w=3840&q=75)
.webp?w=3840&q=75)
.webp?w=3840&q=75)
Flutter creates an opportunity for developers to build complex and attractive UI designs. Among the key widgets enabling such sophistication is the CustomMultiChildLayout. Essentially, The CustomMultiChildLayout class is an advanced multi-child layout widget for managing complex relationships among multiple widgets in a flexible and efficient manner. It allows one to position multiple children within itself according to the demands of the UI design.
Its distinguishing factor as compared to other UI layouts, like the Stack widget, is its ability to handle complex custom layouts. Unlike a Stack widget which can support only a single child per position, CustomMultiChildLayout in Flutter allows you to operate with multiple widgets.
The CustomMultiChildLayout in Flutter is essentially made up of two major components: layoutDelegate and children. Each child within this layout has its ID represented by LayoutId id, and you can modify each child manually as well as position it through axis dependent methods.
Take, for example, the following simple code snippet that creates a CustomMultiChildLayout:
1 CustomMultiChildLayout( 2 delegate: YourDelegate(), 3 children: [ 4 LayoutId( 5 id: 'your-symbol-id-var', 6 child: YourFirstChildWidget(), 7 ), 8 LayoutId( 9 id: 'your-another-symbol-id-var', 10 child: YourSecondChildWidget(), 11 ), 12 // You can add as many children as you want. 13 ], 14 ) 15
The YourDelegate in the code snippet needs to be an instance of a class that extends MultiChildLayoutDelegate. This delegate class hosts the logic that positions the children in the layout.
Utilizing CustomMultiChildLayout in Flutter has become substantial due to its powerful flexibility. This mighty layout widget shines particularly when dealing with the needs of advanced layouts with complex relationships and flexible rules about their arrangement.
For instance, imagine you have multiple widgets that need to be aligned with one or another edge of their parent widget without collision. Or consider a situation where you need to position the middle widget and its final offset position, keep the widget width the same, and place the final widget on the bottom of the layout. In cases like these, the CustomMultiChildLayout becomes a perfect choice.
It's also worth noting that CustomMultiChildLayout is writing direction agnostic. It means the positioning is independent of the text direction, thus giving you freedom to make your layouts more universal.
The primary components of the CustomMultiChildLayout are its layoutDelegate and children. Let’s dive a little deeper into these properties:
1 class YourDelegate extends MultiChildLayoutDelegate { 2 @override 3 void performLayout(Size size) { 4 // Contains layout logic. 5 } 6 } 7
1 CustomMultiChildLayout( 2 delegate: YourDelegate(), 3 children: [ 4 LayoutId( 5 id: 'symbol-id-var', 6 child: YourChildWidget(), 7 ), 8 // Add as many children as you want. 9 ], 10 ) 11
To better understand the use and structuring of the CustomMultiChildLayout, let's consider a simple example of creating a CustomMultiChildLayout with two LayoutIds that should be positioned one below the other.
1 class CustomDelegate extends MultiChildLayoutDelegate { 2 @override 3 void performLayout(Size size) { 4 if (hasChild('top')) { 5 layoutChild('top', BoxConstraints.loose(size)); 6 positionChild('top', Offset(0.0, 0.0)); 7 } 8 9 final double topHeight = sizeOf('top').height; 10 layoutChild('bottom', BoxConstraints.tight(Size(size.width, size.height - topHeight))); 11 positionChild('bottom', Offset(0.0, topHeight)); 12 } 13 14 @override 15 bool shouldRelayout(CustomDelegate oldDelegate) { 16 return false; 17 } 18 } 19 20 CustomMultiChildLayout( 21 delegate: CustomDelegate(), 22 children: [ 23 LayoutId( 24 id: 'top', 25 child: Container(width: 50.0, height: 50.0, color: Colors.blue), 26 ), 27 LayoutId( 28 id: 'bottom', 29 child: Container(width: 50.0, height: 50.0, color: Colors.red), 30 ), 31 ], 32 ) 33
This code displays a blue square on top and a red square below it. The management of the layout and its change on different factors is a fundamental factor in building more complex layouts.
To create advanced layouts effectively, remember the following points:
The use of CustomMultiChildLayout in Flutter not only advances the look and feel of your application but also provides an efficient way of handling complex relationships between widgets on various axes. This is why understanding and harnessing it is so crucial for every Flutter developer aiming to create advanced and professional layouts. Hopefully, this comprehensive blog adds to your understanding and is a helpful resource for your future Flutter development.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
