web-dev-qa-db-fra.com

Flutter - comment supprimer le remplissage par défaut (48 px selon la doc) des widgets (IconButton, CheckBox, FlatButton)

Je suis confronté au problème du remplissage par défaut des widgets (IconButton, CheckBox, FlatButton). J'ai beaucoup cherché cette préoccupation mais sans succès.

enter image description here

Dans l'image ci-dessus, le rectangle bleu extérieur est la taille réelle de ces widgets et je dois supprimer cet espace.

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

et ci-dessous est le code du widget pour l'icône de widget cacher/afficher:

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,
          ),
        )

J'ai également essayé de définir la taille du conteneur, mais pas de chance. A également essayé les propriétés de remplissage des widgets, mais sans succès.

Existe-t-il un moyen de supprimer cet espacement supplémentaire de ces widgets?

flutterflutter-layout
9
Rahul Sharma

Vous pouvez y parvenir en personnalisant le widget Case à cocher.

  1. Créez une CustomCheckbox en utilisant le code exact de flutter/packages/flutter/lib/src/material/checkbox.Dart .

  2. Ajoutez un nouveau champ à votre widget CustomCheckbox

         final bool useTapTarget;

  3. Assurez-vous d'ajouter le nouveau champ à votre constructeur avec sa valeur par défaut définie sur true.

         this.useTapTarget = true

  4. Modifiez la méthode de génération dans la méthode _ CheckboxState . Ajoutez ce bloc de code au-dessus de l'appel de retour.

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

  5. Enfin, utilisez votre widget CustomCheckbox dans votre code et définissez votre champ personnalisé sur false pour supprimer le rembourrage du matériau. exemple

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

Screenshot

3
Myorh

La méthode la plus simple que j'ai trouvée est de créer votre version du widget généralement en combinant GestureDetector Widget avec quelque chose. Par exemple, voici une version de IconButton qui n'a pas le rembourrage Material Design par défaut:

GestureDetector(
  onTap: () {
    //do stuff here
  },
  child: Icon(
    Icons.icon_choice
  ),
)
2
SnakeyHips
Wrap(
    children: <Widget>[
        Text('radio'),
        Radio(
            groupValue: _character,
            onChanged: (value){},
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        )
    ],
    crossAxisAlignment: WrapCrossAlignment.center,
),

cela supprime beaucoup d'espaces

2
shahab sadeghi

Dans mon cas, j'ai utilisé ce widget d'aide pour le préfixe de mon TextFormField, et cela résout ce problème

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

enter image description here

Utilisation 

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)),
                )
0
SaravanaRaja

Vous pouvez essayer de changer les choses en ouvrant la classe IconButton en cliquant sur IconButton tout en appuyant sur ctrl dans les fenêtres. Ensuite, vous trouverez une variable Padding = EdgeConsts.all(8.0). Continuez à le changer et jouez avec selon vos besoins.

0
Harsha pulikollu