Flutter 复选框不需要的触摸空间

Question

我尝试使用 flutter 创建登录屏幕，在那里我添加了记住我复选框，但我无法正确对齐它，

Flutter 复选框在自身周围占用了不需要的空间，以提供良好的触摸用户体验。

这是我的布局显示的方式，

检查下面的代码，

        new Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  new Row(
                    children: <Widget>[
                      new Checkbox(
                        activeColor: Colors.grey,
                        value: _isChecked,
                        onChanged: (bool value) {
                          _onChecked(value);
                        },
                      ),
                      new GestureDetector(
                        onTap: () => print("Remember me"),
                        child: new Text(
                          "Remember me",
                          style: new TextStyle(color: Colors.white70),
                        ),
                      )
                    ],
                  ),
                  new Text(
                    "Forgot password ?",
                    style: new TextStyle(color: Colors.white70),
                  )
                ],
              ),

Answer 1

使用 SizedBox
该小部件基本上用于调整其子项的大小。

SizedBox(
    width: 15,
    height: 15,
    child: Checkbox(value: false, onChanged: null)
)

Answer 2

编辑

简答

Checkbox(
   materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    ...
 )

......................

长答案

您可以通过自定义复选框小部件来实现此目的。

1. 使用flutter/packages/flutter/lib/src/material/checkbox.dart中的确切代码创建 CustomCheckbox 。

2. 向您的 CustomCheckbox 小部件添加新字段

        final bool useTapTarget;
   

3. 确保将新字段添加到构造函数中，并将默认值设置为 true。

        this.useTapTarget = true
   

4. 修改_CheckboxState方法中的build方法。将此代码块添加到返回调用上方。

        Size noTapTargetSize = Size(CustomCheckbox.width, 
        CustomCheckbox.width);
        final BoxConstraints additionalConstraints = 
        BoxConstraints.tight(widget
           .useTapTarget? size : noTapTargetSize);
   

5. 最后，在代码中使用 CustomCheckbox 小部件，并将自定义字段设置为 false 以删除材质填充。例子

   Container(
           margin: EdgeInsets.only(right: 15),
           child:CustomCheckbox(
               value: _checked,
               materialTapTargetSize: null,
               onChanged: _onCheckBoxChange,
               useTapTarget: false,
               activeColor: Colors.teal),
         )