6
votes

Bouton avec scintillement de fond d'image

Je suis nouveau dans la programmation Flutter et je veux demander est-il possible de faire scintiller l'image comme fond de bouton? Voici mon élément image:

RaisedButton(
          child: const Text('LANJUTKAN'),
          color: Theme.of(context).accentColor,

          elevation: 0.0,
          splashColor: Colors.blueGrey,
          onPressed: () {
               // Perform some action
          },
),

et voici mon bouton:

  final _backgroundButton = new AssetImage("assets/background_button.png");

Quelqu'un sait comment faire? il est normal que je change le bouton en relief en bouton plat ou quoi que ce soit d'autre tant que je peux définir l'image comme arrière-plan. Merci!

flutter dart

0 commentaires

4 Réponses :

-1
votes

Comme @pskink l'a mentionné, changez votre enfant RaisedButton de Texte en Image, comme ceci

RaisedButton(
          child: const AssetImage("assets/background_button.png"),
          color: Theme.of(context).accentColor,

          elevation: 0.0,
          splashColor: Colors.blueGrey,
          onPressed: () {
               // Perform some action
          },
),

Mais si vous voulez à la fois du texte et de l'image, utilisez Column ou Row comme enfant de RaisedButton et mettez les deux comme enfants,

0 commentaires

14
votes

le "RaisedButton" est un composant matériel, sa forme dépend des rôles de "conception matérielle", vous pouvez créer votre propre widget bouton personnalisé

GestureDetector(
  child: Container(
   width:120,
   height: 40,
   decoration: BoxDecoration(
     color: Colors.black,
     image: DecorationImage(
       image:AssetImage("assets/background_button.png"), 
       fit:BoxFit.cover
     ),
   child: Text("clickMe") // button text
   )
  ),onTap:(){
   print("you clicked my");
  }
)

1 commentaires

child: le texte ("clickMe") est pour le conteneur

0
votes

Vous pouvez créer un widget personnalisé

Expanded( child: Container( child: ConstrainedBox( constraints: BoxConstraints.expand(), child: Ink.image( image: AssetImage( 'path/the_image.png'), fit: BoxFit.fill, child: InkWell( onTap: null, ), ), ), ), ),

Dans le bouton en relief, utilisez Image () comme enfant au lieu de Text (). Si le texte et l'image sont requis, utilisez simplement le widget Row () ou Column () comme enfant.

Si une seule icône est requise dans un bouton, utilisez IconButton au lieu de RaisedButton

0 commentaires

2
votes

Si quelqu'un d'autre vient ici à la recherche de cela, MaterialButton fonctionne parfaitement.

      MaterialButton(
        padding: EdgeInsets.all(8.0),
        textColor: Colors.white,
        splashColor: Colors.greenAccent,
        elevation: 8.0,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/button_color.png'),
                fit: BoxFit.cover),
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("SIGN OUT"),
          ),
        ),
        // ),
        onPressed: () {
          print('Tapped');
        },
      ),

0 commentaires