如何调整flutter_colorpicker组件大小？嵌入页面而非弹窗

核心解决方法 #

flutter_colorpicker的BlockPicker组件支持通过itemBuilder自定义颜色块的尺寸，不用单纯依赖Container/SizedBox包裹，直接定制每个色块的大小就能实现紧凑的网格效果。

代码实现示例 #

BlockPicker(
  pickerColor: selectedColor,
  onColorChanged: (color) {
    setState(() => selectedColor = color);
  },
  // 自定义颜色块的大小与样式
  itemBuilder: (color, isCurrentColor, changeColor) {
    return GestureDetector(
      onTap: changeColor,
      child: Container(
        margin: const EdgeInsets.all(2), // 控制色块之间的间距
        width: 24, // 设置色块宽度
        height: 24, // 设置色块高度
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(4), // 可选：给色块加圆角
          border: isCurrentColor ? Border.all(color: Colors.black, width: 2) : null,
        ),
      ),
    );
  },
)

额外优化（可选） #

如果需要进一步压缩组件整体占用空间，可以在外层包裹Padding减少内边距：

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
  child: BlockPicker(
    // 上述自定义配置内容
  ),
)

通过这种方式就能实现你预期的小尺寸颜色网格效果，替代单纯用Container/SizedBox包裹的无效尝试。

内容的提问来源于stack exchange，提问作者網絡紅仁 RedInternet