Flutter series: flow in flutter

brief introduction

We are developing web When applied , Sometimes in order to adjust the size of the browser , You need to dynamically adjust the position of components on the page . At this point, you will use flow layout, That's the flow layout .

alike , stay flutter There is also a streaming layout in , The name of this streaming layout is Flow. in fact , stay flutter in ,Flow Usually and FlowDelegate Used together ,FlowDelegate Used to set Flow Size and location of subcomponents , By using FlowDelegate.paintChildre It can be carried out more efficiently widget Redraw operation of . Today we will explain in detail flutter in flow Use .

Flow and FlowDelegate

Let's start with Flow The definition of ：

class Flow extends MultiChildRenderObjectWidget


Flow Inherited from MultiChildRenderObjectWidget, It can contain multiple children widget.

Let's look at its constructor ：

 Flow({
 Key? key,
 required this.delegate,
 List<Widget> children = const <Widget>[],
 this.clipBehavior = Clip.hardEdge,
 }) : assert(delegate != null),
 assert(clipBehavior != null),
 super(key: key, children: RepaintBoundary.wrapAll(children));


You can see Flow There are three main properties in , Namely delegate,children and clipBehavior.

children It's easy to understand , It is Flow The child element of .

clipBehavior It's a Clip Variable of type , It means how to widget Tailoring . The default value here is none.

The last very important attribute is FlowDelegate,FlowDelegate Mainly used for control Flow neutron widget The position of . therefore , When we're in Flow Well defined child in widget after , The rest is the definition FlowDelegate To control how they are displayed widget.

FlowDelegate Is an abstract class , So when we use it , Need to inherit it .

FlowDelegate There are several very important ways ：

 Size getSize(BoxConstraints constraints) => constraints.biggest;


This method is used to define Flow Of size, about Flow Come on , its size It's Wako widget Of size It's independent ,Flow The size of the getSize Method to define .

Next is getConstraintsForChild Method ：

 BoxConstraints getConstraintsForChild(int i, BoxConstraints constraints) => constraints;


getConstraintsForChild Used to control the widget Of Constraints.

paintChildren Used to control how to draw sub widget, It is also a method that we must implement ：

 void paintChildren(FlowPaintingContext context);


FlowDelegate There are two other ways , It is used to judge whether it is necessary to Relayout and Repaint, The parameters of both methods are FlowDelegate:

bool shouldRelayout(covariant FlowDelegate oldDelegate) => false;
bool shouldRepaint(covariant FlowDelegate oldDelegate);


Flow Application

With the introduction above , We basically know how to build Flow 了 , Next, we will deepen our understanding of Flow The understanding of the .

In this case , We mainly use Flow To arrange a few icons .

First we define an array of icons ：

 final List<IconData> buttonItems = <IconData>[
 Icons.home,
 Icons.ac_unit,
 Icons.adb,
 Icons.airplanemode_active,
 Icons.account_box_rounded,
 ];


Then through the corresponding... Of each icon IconData To build a IconButton Of widget：

 Widget flowButtonItem(IconData icon) {
 return Padding(
 padding: const EdgeInsets.symmetric(vertical: 10.0),
 child: IconButton(
 icon: Icon(icon,
 size: 50,
 color: Colors.blue
 ),
 onPressed: () {
 buttonAnimation.status == AnimationStatus.completed
 ? buttonAnimation.reverse()
 : buttonAnimation.forward();
 },

 )
 );
 }


Here we are using IconButton, In order to be different IconButton Leave some space between , We will IconButton Packaged in Padding in .

stay onPressed In the method , We want to be able to handle some animation effects . there buttonAnimation It's a AnimationController object ：

AnimationController buttonAnimation = AnimationController(
 duration: const Duration(milliseconds: 250),
 vsync: this,
 );


With flowButtonItem after , We can build Flow 了 ：

 Widget build(BuildContext context) {
 return Flow(
 delegate: FlowButtonDelegate(buttonAnimation: buttonAnimation),
 children:
 buttonItems.map<Widget>((IconData icon) => flowButtonItem(icon)).toList(),
 );
 }


Flow Of child That's what we just created flowButtonItem,FlowButtonDelegate Is the class we need to create , Because I was building flowButtonItem When , We want to do some animation , and FlowDelegate It is really used to control Widget Drawn classes , So we need to put buttonAnimation Pass as parameter to FlowButtonDelegate.

Here is FlowButtonDelegate The definition of ：

class FlowButtonDelegate extends FlowDelegate {
 FlowButtonDelegate({required this.buttonAnimation})
 : super(repaint: buttonAnimation);

 final Animation<double> buttonAnimation;

 @override
 bool shouldRepaint(FlowButtonDelegate oldDelegate) {
 return buttonAnimation != oldDelegate.buttonAnimation;
 }

 @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 * buttonAnimation.value,
 0,
 ),
 );
 }
 }


FlowButtonDelegate Inherited from FlowDelegate, And passed in buttonAnimation object .

Here we are based on buttonAnimation Whether there is a change to decide whether to proceed Repaint.

If it needs to be done Repaint, So call paintChildren Methods .

stay paintChildren in , We according to the child Self height and buttonAnimation To draw animation .

that buttonAnimation How does the value of change ？ This is a review of what we created before flowButtonItems Of onPress The method .

stay onPress In the method , We call buttonAnimation.reverse perhaps buttonAnimation.forward These two methods are used to modify buttonAnimation Value .

The results are as follows ：

In the initial state , All the components are together .

When we click on the icon above , We can get the following interface ：

The icon expands in the animation .

summary

Flow It is a kind of complicated layout Components , If combined with animation , Can get a very perfect effect .

Examples of this article ：

https://github.com/ddean2009/learn-flutter.git