Flutter是否有类似Bootstrap的网格系统第三方包？

当然有，这类第三方包能帮你省去手动用LayoutBuilder适配的大量工作量，以下是几个常用选项：

• flutter_staggered_grid_view：不仅支持响应式网格布局，还能实现交错排列效果。可以根据屏幕宽度动态调整列数，适配手机、平板等不同设备：

StaggeredGridView.countBuilder(
  crossAxisCount: MediaQuery.of(context).size.width > 600 ? 3 : 2,
  itemCount: 10,
  itemBuilder: (context, index) => Container(color: Colors.blue.shade100, margin: EdgeInsets.all(8)),
  staggeredTileBuilder: (index) => StaggeredTile.fit(1),
)

• responsive_framework：主打响应式布局，内置类似 Bootstrap 的断点系统，能清晰定义不同屏幕尺寸下的布局规则：

ResponsiveBreakpoints.builder(
  breakpoints: [
    Breakpoint(start: 0, end: 450, name: MOBILE),
    Breakpoint(start: 451, end: 800, name: TABLET),
    Breakpoint(start: 801, end: double.infinity, name: DESKTOP),
  ],
  builder: (context, breakpoint) {
    final columns = breakpoint.name == DESKTOP ? 4 : breakpoint.name == TABLET ? 2 : 1;
    return GridView.count(
      crossAxisCount: columns,
      children: List.generate(8, (index) => Container(color: Colors.green.shade100, margin: EdgeInsets.all(8))),
    );
  },
)

• bootstrap_flutter：完全对标 Bootstrap 网格系统，提供BootstrapContainer、BootstrapRow、BootstrapCol等组件，用法和网页端 Bootstrap 几乎一致，学习成本极低：

BootstrapContainer(
  padding: EdgeInsets.all(16),
  child: BootstrapRow(
    children: [
      BootstrapCol(sm: 6, lg: 3, child: Container(color: Colors.red.shade100, padding: EdgeInsets.all(16))),
      BootstrapCol(sm: 6, lg: 3, child: Container(color: Colors.orange.shade100, padding: EdgeInsets.all(16))),
      BootstrapCol(sm: 6, lg: 3, child: Container(color: Colors.yellow.shade100, padding: EdgeInsets.all(16))),
      BootstrapCol(sm: 6, lg: 3, child: Container(color: Colors.green.shade100, padding: EdgeInsets.all(16))),
    ],
  ),
)

这些包都能快速帮你实现全屏幕尺寸适配的布局，你可以根据项目的具体需求选择合适的工具。

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