Je voudrais créer un bouton avec un effet d'entraînement circulaire en utilisant une icône, j'ai vu quelque chose en ligne mais je ne peux pas le faire. Ce n'est pas aussi simple que ça devrait l'être. Essayer ce code maintenant.
Container(
margin: EdgeInsets.all(0.0),
height: 100.0,
width: 100.0,
child: new RaisedButton(
padding: EdgeInsets.all(0.0),
elevation: 100.0,
color: Colors.black,
highlightElevation: 0.0,
onPressed: () {},
splashColor: Colors.red,
highlightColor: Colors.red,
//shape: RoundedRectangleBorder e tutto il resto uguale
shape: CircleBorder(
side: BorderSide(color: Colors.black, width: 5),
),
child: Icon(
FontAwesomeIcons.chevronCircleUp,
color: Colors.white.withOpacity(.8),
size: 80,
)),
),
Un autre essai était avec ceci, mais je ne peux pas comprendre pourquoi ceux-ci ne sont pas parfaitement centrés les uns avec les autres.
InkWell(
onTap: () {},
splashColor: Colors.red,
highlightColor: Colors.white,
child: new Icon(
FontAwesomeIcons.chevronCircleUp,
size: 100,
),
)
Merci pour l'aide
7 Réponses :
Enveloppez votre InkWell widget avec Material widget et material widget doit avoir une couleur.
Material( color: Colors.transparent,
child: InkWell( onTap: () { print("tapped"); }, ) );
Pouvez-vous me dire pourquoi dans le deuxième code, ils ne se centrent pas parfaitement aussi?
L'effet d'entraînement est également appliqué à une boîte carrée et non en cercle, comme je voudrais.
@FlorisMarpepa: L'effet d'encre commence à partir de la position du toucher, pas du centre.
Dans le premier extrait de code, celui que vous avez enveloppé dans InkWell , l'effet n'est pas circulaire, je suppose que vous voulez l'effet circulaire.
Vous pouvez utiliser directement IconButton , plutôt que de l' InkWell avec InkWell .
IconButton(
icon: Icon(FontAwesomeIcons.chevronCircleUp),
iconSize: 100,
onPressed: () {},
splashColor: Colors.blue,
),
Oui, j'ai essayé de cette façon mais cela ne fonctionne pas. Je viens de copier et coller votre code exact et il ne montre que l'icône, aucun effet d'entraînement du tout.
D'accord, ce gif a-t-il le même effet que celui que vous essayez d'obtenir? @FlorisMarpepa
oui, mais comment définir les dimensions de l'effet? Cependant, je ne sais pas pourquoi cela ne fonctionne pas avec moi, mais oui avec vous. Je viens de copier-coller le code ..
Je pense que vous devez avoir un widget MaterialApp comme ancêtres pour utiliser certaines des fonctionnalités de conception matérielle. Est-ce le cas? Autant que je sache, IconButton n'a pas de propriétés liées aux dimensions de l'effet d'ailleurs. Cela commence juste à partir de l'endroit où vous appuyez et allez en rond.
Ma page est la maison de MaterialApp, j'ai essayé d'envelopper votre code dans un Material. Cela me donne de l'effet mais un carré blanc en arrière-plan aussi. J'ai donc fait l'argument couleur = Colors.transparent, maintenant ok mais l'ondulation va carrée pas ronde Material (color: Colors.transparent, child: IconButton (icon: Icon (FontAwesomeIcons.chevronCircleUp), iconSize: 100, onPressed: () { }, splashColor: Colors.blue,),),
Je pense que si vous avez un conteneur avec un arrière-plan, l'ondulation est derrière ce fond. C'est aussi loin que je l'ai compris
Je vois que vous souhaitez un contrôle granulaire sur la taille de l'ondulation. J'ai fini par utiliser le code ci-dessous.
Padding(
padding: EdgeInsets.all(8.0),
child: InkWell(
customBorder: new CircleBorder(),
onTap: () {},
splashColor: Colors.red,
child: new Icon(
Icons.arrow_back,
size: 24,
color: Colors.black,
),
),
)
L'effet InkWell rend un carré, mais l'utilisation de CircleBorder rogne en une forme circulaire.
Par défaut, l'effet tente de remplir l'espace, donc pour modifier la taille, j'ai ajouté un rembourrage de tous les côtés, recadrant l'effet. Si vous rencontrez toujours des problèmes avec l'effet d'entraînement qui ne s'affiche pas du tout, l'encapsulation de votre code dans un Material() devrait résoudre la plupart des problèmes ou jeter un œil au thème de l'application.
J'ai utilisé un FAB sans fond.
FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.transparent,
mini: true,
child: Icon(
Icons.more_vert,
color: Colors.white,
),
)
ajoutez "élévation: 0.0" pour supprimer l'ombre.
CircleAvatar(
backgroundColor: Colors.grey[200],
child: IconButton(
icon: Icon(
Icons.search,
color: Colors.black,
),
onPressed: () {},
),
),
https://github.com/flutter/flutter/issues/3782
Si cela ne fonctionne pas pour vous avec IconButton, voici l'explication.
TLDR: Ne définissez pas d'arrière-plan sur votre conteneur parent et laissez Material faire son travail de dessin d'ondulation sur l'arrière-plan.
Vous pouvez simplement utiliser un RawMaterialButton avec des constraints et des propriétés de shape pour créer une icône avec une couleur de teinte et un arrière-plan circulaire .
Vous pouvez également désactiver la propriété de shape pour avoir un bouton rectangulaire.
Remarque:
Ici, j'ai utilisé un plugin SVG pour utiliser l'icône SVG souhaitée (placée dans le dossier assets / icons), mais vous pouvez simplement utiliser n'importe quel widget Icon place.
Exemple:
RawMaterialButton(
onPressed: () {}, //do your action
elevation: 1.0,
constraints: BoxConstraints(), //removes empty spaces around of icon
shape: CircleBorder(), //circular button
fillColor: Color(0xffff6464), //background color
splashColor: Colors.amber,
highlightColor: Colors.amber,
child: SvgPicture.asset(
"assets/icons/heart.svg",
width: 24,
height: 24,
),
padding: EdgeInsets.all(8),
)
Pouvez-vous modifier votre question avec un exemple de ce que vous recherchez?
Je veux juste que l'effet d'entraînement soit appliqué de manière circulaire et non au carré comme c'est le cas maintenant. Et je ne comprends pas pourquoi dans le deuxième code il ne centre pas parfaitement l'enfant.