Flutter - как удалить отступы по умолчанию (48 пикселей согласно документу) из виджетов (IconButton, CheckBox, FlatButton)

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

В моем случае я использовал этот вспомогательный виджет для префикса моего TextFormField, и он решил эту проблему

Widget buildCustomPrefixIcon(IconData iconData) {
 return Container(
 width: 0,
 alignment: Alignment(-0.99, 0.0),
 child: Icon(
    iconData,
   ),
  );
}

Использование

TextFormField(
                  controller: _textEditConPassword,
                  focusNode: _passwordFocus,
                  keyboardType: TextInputType.text,
                  validator: _validatePassword,
                  style: getStyleText(context),
                  decoration: InputDecoration(
                      isDense: true,
                      //to reduce the size of icon, use if you want. I used, because 
my custom font icon is big
                      labelText: AppConstants.PASSWORD,
                      contentPadding: EdgeInsets.only(left: 0),
                      //to make the base line of icon & text in same
                      labelStyle: getLabelStyleText(context),
                      prefixIcon: buildCustomPrefixIcon(AppCustomIcon.icon_pwd_key)),
                )

Answer 2

Вы можете попробовать что-то изменить, открыв класс IconButton, нажав IconButton, одновременно нажимая ctrl в окнах. Тогда вы найдете переменную Padding = EdgeConsts.all(8.0). Продолжайте менять его и играйте в соответствии с вашими потребностями.

Answer 3

Этого можно добиться, настроив виджет «Флажок».

1. Создать CustomCheckbox, используя точный код из трепетание / пакеты / трепетание / Библиотека / SRC / материал / checkbox.dart .

2. Добавить новое поле в виджет CustomCheckbox

        final bool useTapTarget;
   

3. Обязательно добавьте новое поле в конструктор с его значением по умолчанию значение установлено в true.

        this.useTapTarget = true
   

4. Измените метод построения в методе _CheckboxState . Добавь это блок кода над обратным звонком.

        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

Самый простой способ, который я нашел, - это создать свою версию виджета, обычно комбинируя GestureDetector Виджет с чем-то. Например, вот версия IconButton, в которой нет отступа по умолчанию для Material Design:

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