Flow Widget In Flutter

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.

Code Snippet

We will use the following code snippets for making the demo for elaborating the working of the Flow widget.

  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,
        ),
      );
    }
  }
}

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(

transform: Matrix4.translationValues(

dy * 0.1 * openAnimation.value,

);

}

2. Creating Main UI

We can create the UI as per our needs. We have just created a simple demo for explaining and understanding the Flow widget.

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),
              ),
            ),
          ),
        ),
      ),
    );
  }

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),

);

}

NOTE:

=> 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

Output

We have created a simple demo for demonstrating the output of the Flow Widget

Conclusion

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!!

flow widget flutter

Abhishek Rathore 28 July 2022

. . .

Flow Widget In Flutter

Code Snippet

2. Creating Main UI

NOTE:

Output

Conclusion

Leave a Comment Cancel Reply

Message Sent!