Flutter-如何从小部件（IconButton，CheckBox，FlatButton）删除默认填充（每个文档48 px）

Question

我正面临着小部件（IconButton，CheckBox，FlatButton）的默认填充问题。我为此问题进行了很多搜索，但没有成功。

在上图中，外部蓝色矩形是这些小部件的实际大小，我必须删除该空间。

Checkbox(
          onChanged: (value) {
            setState(() {
              _rememberMeFlag = !_rememberMeFlag;
            });
          },
          value: _rememberMeFlag,
          activeColor: const Color(0xff00bbff),
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        )

下面是隐藏/显示窗口小部件图标的窗口小部件代码：

new Container(
          child: TextFormField(
            decoration: InputDecoration(
              labelText: "Password",
              suffixIcon: Padding(
                padding: EdgeInsetsDirectional.zero,
                child: GestureDetector(
                  child: Icon(
                    hidePassword ? Icons.visibility : Icons.visibility_off,
                    size: 20.0,
                    color: Colors.black,
                  ),
                ),
              ),
              contentPadding: const EdgeInsets.only(
                  left: 0.0, top: 6.0, bottom: 6.0, right: 0.0),
            ),
            obscureText: !hidePassword,
            maxLength: 20,
          ),
        )

我也尝试设置容器的大小，但是没有运气。还尝试了小部件的填充属性，但没有成功。

有什么方法可以从这些小部件中删除这些多余的间距？

Answer 1

包裹你的CheckBox内部SizedBox将调整复选框的填充大小

  SizedBox(
    height: 24.0,
    width: 24.0,
    child: Checkbox(...),
 )

Answer 2

有以下三种选择：

1.

 // or Checkbox()
Radio( 
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
)

 // or Checkbox()
Radio(
    visualDensity: VisualDensity(horizontal: -4, vertical: -4),
)

SizedBox(
    height: 20, 
    width: 20, 
 // or Checkbox()
    child: Radio()
    )

Answer 3

编辑

将materialTapTargetSize的值设置为MaterialTapTargetSize.shrinkWrap

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,
               onChanged: _onCheckBoxChange,
               useTapTarget: false,
               activeColor: Colors.teal),
         )
   

Answer 4

小部件的默认尺寸Checkbox为 48x48。因此，根据上面的答案，如果我们将其包裹Checkbox起来SizedBox，那么白色间距就会减少。我尝试使用 24x24，所有间距都消失了。

SizedBox(
  width: 24.0,
  height: 24.0,
  child: Checkbox(),

之后，我将其包裹SizedBox在Padding小部件内，以提供我想要的任何一侧的间距。

Padding(
  padding: const EdgeInsets.only(right: 8.0),
  child: SizedBox(
    width: 24.0,
    height: 24.0,
    child: Checkbox(),
  ),
)

Answer 5

Wrap(
    children: <Widget>[
        Text('radio'),
        Radio(
            groupValue: _character,
            onChanged: (value){},
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        )
    ],
    crossAxisAlignment: WrapCrossAlignment.center,
),

this removes lots of spaces

Answer 6

对于那些寻找复制和粘贴 ;) 的人，这是我使用的

import 'package:flutter/material.dart';

class NoPaddingCheckbox extends StatelessWidget {
  final bool isMarked;
  final Function(bool newValue) onChange;
  final double size;

  NoPaddingCheckbox({
    @required this.isMarked,
    @required this.onChange,
    this.size = 24,
  });

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(maxHeight: size, maxWidth: size),
      child: RawMaterialButton(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
        child: Icon(_getIconData(), size: size),
        onPressed: () => onChange(!isMarked),
      ),
    );
  }

  IconData _getIconData() {
    if (isMarked) {
      return Icons.check_box;
    }

    return Icons.check_box_outline_blank;
  }
}

Answer 7

我发现的最简单的方法是通常通过将 Widget 与某些东西组合来创建您的 Widget 版本GestureDetector。例如，以下版本IconButton没有默认的 Material Design 填充：

GestureDetector(
  onTap: () {
    //do stuff here
  },
  child: Icon(
    Icons.icon_choice
  ),
)