Flutter Widget : Flow

Write it at the front

\Flow Components need to be matched \FlowDelegate Use , stay \FlowDelegate Write logic in ,\Flow You can adjust its children Size and location of .

Use \Flow Is used to optimize children Use transformation matrix （transformation matrices） Rearrange . Be similar to Stack.

That is, when we want to customize a pair children Layout Widget When , have access to \Flow.

Content

Basic usage

From the official example, a basic usage . In this case , In addition to showing the right children Layout , It also demonstrates how to use Animation To make the children The transformation matrix used changes , So as to achieve the change of position .

 class FlowMenu extends StatefulWidget {
   const FlowMenu({Key? key}) : super(key: key);

   @override
   _FlowMenuState createState() => _FlowMenuState();
 }

 class _FlowMenuState extends State<FlowMenu> with SingleTickerProviderStateMixin {
   late AnimationController menuAnimation;
   IconData lastTapped = Icons.notifications;
   final List<IconData> menuItems = <IconData>[
     Icons.home,
     Icons.new_releases,
     Icons.notifications,
     Icons.settings,
     Icons.menu,
   ];

   void _updateMenu(IconData icon) {
     if (icon != Icons.menu) {
       setState(() => lastTapped = icon);
     }
   }

   @override
   void initState() {
     super.initState();
     menuAnimation = AnimationController(
       duration: const Duration(milliseconds: 250),
       vsync: this,
     );
   }

   Widget flowMenuItem(IconData icon) {
     final double buttonDiameter = MediaQuery.of(context).size.width / menuItems.length;
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 8.0),
       child: RawMaterialButton(
         fillColor: lastTapped == icon ? Colors.amber[700] : Colors.blue,
         splashColor: Colors.amber[100],
         shape: const CircleBorder(),
         constraints: BoxConstraints.tight(Size(buttonDiameter, buttonDiameter)),
         onPressed: () {
           _updateMenu(icon);
           menuAnimation.status == AnimationStatus.completed
             ? menuAnimation.reverse()
             : menuAnimation.forward();
         },
         child: Icon(
           icon,
           color: Colors.white,
           size: 45.0,
         ),
       ),
     );
   }

   @override
   Widget build(BuildContext context) {
     return Flow(
       delegate: FlowMenuDelegate(menuAnimation: menuAnimation),
       children: menuItems.map<Widget>((IconData icon) => flowMenuItem(icon)).toList(),
     );
   }
 }

 class FlowMenuDelegate extends FlowDelegate {
   FlowMenuDelegate({required this.menuAnimation}) : super(repaint: menuAnimation);

   final Animation<double> menuAnimation;

   @override
   bool shouldRepaint(FlowMenuDelegate oldDelegate) {
     return menuAnimation != oldDelegate.menuAnimation;
   }

   @override
   void paintChildren(FlowPaintingContext context) {
     double dx = 0.0;
     for (int i = 0; i < context.childCount; ++i) {
       dx = context.getChildSize(i)!.width * i;
       context.paintChild(
         i,
         transform: Matrix4.translationValues(
           dx * menuAnimation.value,
           0,
           0,
         ),
       );
     }
   }
 }

Compared to the layout Stage layout children, Here it is. paint Stage , stay \FlowDelegate.paintChildren In the method , Give Way children Use the transformation matrix to determine the position . This is done simply by \Flow Redraw , So as to achieve children Efficient relocation . There is no need to let children Then rearrange .

Most effectively promote \Flow The way to redraw is to \FlowDelegate The construction method of provides a Animation, such \Flow Will monitor this Animation, Then when Animation When there is a callback ,\Flow Will redraw , Avoided build and layout.

Construction method

class Flow extends MultiChildRenderObjectWidget {
  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));

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

\Flow There are two constructors , The difference is that by default RepaintBoundary Package , It wraps every children, Avoid when \Flow When redrawing , Lead to children Also redrawn .