Flutter如何实现组件动态高度为指定数值的倍数并对齐预设网格

需求说明 #

需要让多个高度动态的Flutter组件的尺寸始终为20的整数倍，适配预定义网格，组件扩展时高度/宽度每次固定增加20像素，实现与预设网格的对齐效果。

初始代码 #

import 'package:flutter/material.dart';

class TreeNode extends StatelessWidget {
  const TreeNode({
    Key? key,
    required this.child,
    required this.minSize,
    required this.maxSize,
  }) : super(key: key);

  final Widget child;
  final int minSize, maxSize;

  @override
  Widget build(BuildContext context) {
    return FittedBox(
      child: Container(
        color: Colors.green,
        width: MediaQuery.of(context).size.width <= 400
            ? minSize.toDouble()
            : maxSize.toDouble(),
        height: 200, // 需要动态调整为20的整数倍
        child: Visibility(
          visible: true,
          child: child,
          maintainSize: true,
          maintainState: true,
          maintainAnimation: true,
        ),
      ),
    );
  }
}

实现效果示例 #

最终解决方案 #

使用携带stepHeight和stepWidth参数的IntrinsicWidth组件即可实现需求，该方案性能开销相对偏高，但可以完全匹配对齐网格的要求。
更新后代码如下：

import 'package:flutter/material.dart';

class TreeNode extends StatelessWidget {
  const TreeNode({
    Key? key,
    required this.child,
    required this.minSize,
    required this.maxSize,
  }) : super(key: key);

  final Widget child;
  final int minSize, maxSize;

  @override
  Widget build(BuildContext context) {
    return IntrinsicWidth(
      stepHeight: 20,
      stepWidth: 20,
      child: Container(
        color: Colors.green,
        width: MediaQuery.of(context).size.width <= 400
            ? minSize.toDouble()
            : maxSize.toDouble(),
        child: Visibility(
          visible: false,
          child: child,
          maintainSize: true,
          maintainState: true,
          maintainAnimation: true,
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者xWanna