Flutter如何实现子元素可自动换行的列表视图

我期望实现的效果如下

当前实际实现效果如下

我曾尝试使用GridView实现，但GridView要求子元素按照指定宽高比渲染，不符合我的需求；也试过横向滚动的ListView，但是会产生无限横向滚动的问题。恳请各位指点可行的实现方案，当前使用的代码如下：

ListView.builder(
  itemCount: categories.length,
  scrollDirection: Axis.horizontal,
  shrinkWrap: true,
  itemBuilder: (context,index){
      return Container(
           margin: EdgeInsets.all(3),
           padding: EdgeInsets.all(5),
           decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(4),
                border: Border.all(color: AppColors.darkOrange)
                ),
           child: Text(categories[index],style: AppTextStyles.smallTextStyle,)
                 );
           }
      ),

你需要的是自适应子元素宽度、溢出自动换行的流式布局，直接使用Flutter自带的Wrap组件即可实现，无需自定义布局逻辑。修改后的代码参考如下：

Wrap(
  // 同排子元素的水平间距
  spacing: 3,
  // 行与行之间的垂直间距
  runSpacing: 3,
  children: categories.map((category) {
    return Container(
      padding: const EdgeInsets.all(5),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4),
        border: Border.all(color: AppColors.darkOrange),
      ),
      child: Text(category, style: AppTextStyles.smallTextStyle),
    );
  }).toList(),
)

如果需要限制整个标签区域的最大宽度，在外层套一层对应宽度限制的容器即可。

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