You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何删除或调整flutter_bootstrap组件列与列之间的间距

问题描述

在Flutter项目中使用flutter_bootstrap开发时,同一BootstrapRow下的多个BootstrapCol之间出现默认间距,需要删除或缩小该间距,当前实现效果如下:
实现效果展示
当前使用的代码:

BootstrapContainer(
          fluid: true,
          padding: EdgeInsets.only(
            top: 10.0
          ),
          children: [
                BootstrapRow(
                  height: 160,
                  children: <BootstrapCol>[
                    BootstrapCol(
                      fit: FlexFit.tight,
                      sizes: 'col-6',
                      child: Container(
                        color: PRIMARY_BACKGROUND_CONTAINER_COLOR,
                          child: Text("some text")
                      ),
                    ),
                    BootstrapCol(
                      sizes: 'col-6',
                      child: Container(
                          color: PRIMARY_BACKGROUND_CONTAINER_COLOR,
                          child: Text("some text")
                      ),
                    ),
                  ],
                ),
              ],
        )

flutter_bootstrap默认遵循Bootstrap的栅格规范,会给列添加水平padding(称为gutter)来实现默认的列间距效果,按以下方案调整即可

解决方案
  • 方案1:单组列局部去除/缩小间距
    直接给对应BootstrapCol组件设置padding参数,要完全去掉就设为EdgeInsets.zero,要缩小就自定义水平padding数值即可。修改后代码如下:
BootstrapContainer(
  fluid: true,
  padding: const EdgeInsets.only(top: 10.0),
  children: [
    BootstrapRow(
      height: 160,
      children: <BootstrapCol>[
        BootstrapCol(
          fit: FlexFit.tight,
          sizes: 'col-6',
          // 新增padding设置,完全去除间距
          padding: EdgeInsets.zero,
          child: Container(
            color: PRIMARY_BACKGROUND_CONTAINER_COLOR,
            child: const Text("some text")
          ),
        ),
        BootstrapCol(
          sizes: 'col-6',
          // 同步设置padding
          padding: EdgeInsets.zero,
          child: Container(
            color: PRIMARY_BACKGROUND_CONTAINER_COLOR,
            child: const Text("some text")
          ),
        ),
      ],
    ),
  ],
)
  • 方案2:全局修改所有列的默认间距
    如果需要全局调整所有BootstrapCol的默认间距,在项目入口初始化时修改flutter_bootstrap的全局配置即可,示例代码如下:
void main() {
  FlutterBootstrap().setSettings(
    // 自定义全局gutter值,默认是16,设为0即可完全去掉列间距,设为更小的数值就缩小间距
    gutter: 0,
  );
  runApp(const MyApp());
}

内容的提问来源于stack exchange,提问作者GNassro

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.07 04:48:02