如何在Flutter中创建如图所示的自定义复选框按钮？

先看你需要的效果：

这里提供一个基础的自定义复选框实现代码，你可以根据需求调整样式：

HTML 结构 #

<div class="custom-checkbox">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">选项1</label>
</div>

CSS 样式 #

/* 隐藏原生复选框 */
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 自定义复选框外观 */
.custom-checkbox label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  line-height: 20px;
}

.custom-checkbox label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
}

/* 选中状态的样式 */
.custom-checkbox input[type="checkbox"]:checked + label::before {
  background-color: #2196F3;
  border-color: #2196F3;
}

.custom-checkbox input[type="checkbox"]:checked + label::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 8px;
  height: 14px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

这段代码通过隐藏原生复选框，利用label的伪元素实现自定义样式，你可以修改颜色、边框、尺寸等属性来匹配你需要的效果。

内容的提问来源于stack exchange，提问作者Red Player Gaming