Updated 27 April 2023
In this blog, we will learn about Flow Widget In Flutter and how they help us create an interactive user Interface for the flutter application.
Flow layout can move the child widgets around the screen with transformation metrics during the painting phase using the matrices from the FlowDelegate.paintChildren function. For instance, you want to add animation to the widgets while changing the situation of the child widget.
Read more about Flutter app development services from mobikul.
We will use the following code snippets for making the demo for elaborating the working of the Flow widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
child: Container( color: Colors.blueGrey, child: Flow( delegate: DelegateClass(openAnimation: openAnimation), children: itemList.map<Widget>((i) => createMainItem(i)).toList(), ), ) // Delegate class class DelegateClass extends FlowDelegate { DelegateClass({required this.openAnimation}) : super(repaint: openAnimation); final Animation<double> openAnimation; @override bool shouldRepaint(DelegateClass oldDelegate) { return openAnimation != oldDelegate.openAnimation; } @override void paintChildren(FlowPaintingContext context) { double dy = 0.0; for (int i = 0; i < context.childCount; ++i) { dy = context.getChildSize(i)!.height * i; context.paintChild( i, transform: Matrix4.translationValues( 0, dy * 0.1 * openAnimation.value, 0, ), ); } } } |
We can create the UI as per our needs. We have just created a simple demo for explaining and understanding the Flow widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
Widget createMainItem(String name) { return GestureDetector( onTap: () { openAnimation.reverse(); }, onTap: () { openAnimation.forward(); }, child: Padding( padding: const EdgeInsets.all(5.0), child: Container( width: MediaQuery.of(context).size.width, height: 100, decoration: const BoxDecoration( color: Colors.blue, boxShadow: [BoxShadow(blurRadius: 2)], ), child: FittedBox( child: Padding( padding: const EdgeInsets.all(20.0), child: Center( child: Text(name), ), ), ), ), ), ); } |
=> Flow widget takes other widgets in a tree manner
=> Delegate class control the transformation metrics of children, you can also use the animation inside the same class as per your need
We have created a simple demo for demonstrating the output of the Flow Widget
In this blog, we have learned about the implementation of the Flow Widget In Flutter.
For more information regarding the Flow Widget In Flutter Reference Link
Thanks for reading this blog. You can also check other blogs from here.
Thanks for reading!!
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
Be the first to comment.