web-dev-qa-db-fra.com

Créer un bouton avec une image dans Flutter?

Comment créer un bouton avec une image en utilisant Flutter? Cela semble être la chose la plus simple à faire, mais l'image ne remplit pas complètement le widget parent. Voici ce que j'ai:

Container(child: ConstrainedBox(
    constraints: BoxConstraints.expand(),
    child: FlatButton(onPressed: null,
        child: Image.asset('path/the_image.png'))))

J'ai suivi ce post comme guide. Mon image ressemble à ceci:

enter image description here

Remarquez le remplissage autour de l'image PNG - ce n'est pas dans le code. D'où est ce que ça vient? Le PNG lui-même n'a pas de remplissage de toile, donc ce ne doit pas être la bonne technique.

Tout ce dont j'ai besoin est un bouton avec une image qui remplit tout le FlatButton, ou un autre widget auquel je peux ajouter des actions, sans déformer l'image.

imagebuttonwidgetflutter
13
Hahnemann

Avoir une image à l'intérieur d'un FlatButton peut ne pas correspondre à vos besoins, car il prend soin de certains styles (comme le rembourrage) par lui-même.

Pour avoir un contrôle total sur l'aspect de votre bouton, vous voudrez peut-être créer un widget personnalisé (même un simple Container avec un BoxDecoration personnalisé pour afficher l'image) et l'envelopper avec un reconnaisseur de gestes pour gérer l'utilisateur interactions (un simple tapotement, dans votre cas). L'implémentation la plus simple utiliserait un GestureDetector, mais il y a aussi d'autres widgets, comme InkWell qui rendent une ondulation de la conception matérielle sur la surface du widget tappable à la pression.

2
Dario Ielardi

Placez votre image dans un gestureDetector comme ceci:

GestureDetector(
    onTap: () {}
    child: Image.asset('path/the_image.png')
)
1
user12227098
GestureDetector(
    onTap: () {print('click on edit');},
    child: Image(
        image: AssetImage('assets/images/icons/edit-button.png'),
        fit: BoxFit.cover,
        height: 20,
    )
),
1
Prakash Mandal

vous pouvez le faire facilement en utilisant Stack

      Stack(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height / 3.6,
            width: MediaQuery.of(context).size.width / 2.2,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child:imageLoader1(img),
             /* Image.asset(
                "$img",
                fit: BoxFit.cover,
              ),*/
            ),
          ),

          Positioned(
            right: -10.0,
            bottom: 3.0,
            child: RawMaterialButton(
              onPressed: (){},
              fillColor: Colors.white,
              shape: CircleBorder(),
              elevation: 4.0,
              child: Padding(
                padding: EdgeInsets.all(5),
                child: Icon(
                  isFav
                      ?Icons.favorite
                      :Icons.favorite_border,
                  color: Colors.red,
                  size: 17,
                ),
              ),
            ),
          ),
        ],


      ),
0
waseem