J'apprends à utiliser Flutter, et maintenant je suis tombé sur un problème lors du coiffant d'un bouton. Même les guides et les questions suivants ont demandé ici, mon bouton de style apparaît "buggé", probablement à cause d'un problème dans mon code. Vérifiez comment le bouton regarde maintenant:
Ceci est le code de mon bouton (le problème est là, car cela se produit même en montrant le bouton), Et je pense que le problème est dans le conteneur que j'ai à l'intérieur, ce qui est probablement faux, mais je ne peux pas réussir à trouver le problème:
3 Réponses :
Vérifiez ce code
RaisedButton(
padding: const EdgeInsets.all(0.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),),
onPressed: () {},
textColor: Colors.white,
child: Container(
decoration: const BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(30)),
gradient: LinearGradient(
colors: <Color>[
Colors.purple,
Color.fromARGB(1, 247, 120, 150),
],
),
),
padding: const EdgeInsets.all(20.0),
child: const Text('Empezar partida',
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold)),
),
),
Ne fonctionne pas non plus; Je vois toujours un rembourrage entre le conteneur interne (et son gradient) et le bouton réel: i.Imgur. com / jy1vp2j.png
Ajouter le rembourrage: EdgeInsets.Tous (0,0) Il retirera le rembourrage également ajouter de la forme pour le bouton surélevé Mettre à jour mon code de code
Je viens de la corriger en ajoutant des pompiers spécifiques pour toutes les directions! J'ai utilisé votre code et ajouté au conteneur () la ligne suivante: edgeinsets.Only (à gauche: 25,0, top: 18, bas: 18, droite: 25) maintenant ça marche bien :)
Essayez ce code.
Container(
height: 50.0,
margin: EdgeInsets.all(10),
child: RaisedButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(80.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xff374ABE), Color(0xff64B6FF)],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: BorderRadius.circular(30.0)),
child: Container(
constraints:
BoxConstraints(maxWidth: 250.0, minHeight: 50.0),
alignment: Alignment.center,
child: Text(
"Gradient Button",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 15),
),
),
),
),
),
Celui-ci semble fonctionner! Ce n'est pas exactement comment je voulais l'afficher, mais c'est quelque chose. Quoi qu'il en soit, je vais mettre ma réponse depuis que les spécificités de mon problème sont résolus avec une autre chose. Je prépouvons votre solution de toute façon!
Veuillez accepter la réponse si cela résolvait votre problème. Merci.
Avec l'aide de la solution de @ashwithsaldanha et @varunkiamani (vous avez mon upvote!), j'ai réussi à entrer dans une solution différente qui corrige mon problème bien: je viens d'utiliser mon conteneur (), edgetinsets.only () et fournissait les paramètres suivants pour la corriger:
RaisedButton(
padding: const EdgeInsets.all(0.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
onPressed: () {},
textColor: Colors.white,
child: Container(
decoration: const BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(30)),
gradient: LinearGradient(
colors: <Color>[
Colors.purple,
Color.fromARGB(1, 247, 120, 150),
],
),
),
padding:
EdgeInsets.only(left: 27.0, top: 19, bottom: 19, right: 27),
child: const Text('Empezar partida',
style: TextStyle(
fontSize: 21,
color: Colors.white,
fontWeight: FontWeight.bold)),
),
),
Vous avez toujours le même problème. Cette solution ne fonctionnera pas si votre texte est trop court. CODEPEN.IO/VARUNKAMANI/PEN/POGPBRPLe
C'est vrai, mais seulement pour un texte de 1 lettre. 2 ou 3 rendu joliment aussi, et il est réparable simplement de changer les paramètres de bordsInsets.Only (). Quelle solution plus générale que vous proposeriez? Si cela fait la même chose et travaille pour tous les cas de bord, je le choisirai comme la réponse correcte. Les réponses précédentes n'ont pas fourni le résultat attendu.
Voulez-vous que ce bouton soit complètement rempli?
@LonelyWolf My Idée est que le gradient du bouton intérieur occupe la forme du bouton entière, ce qui est censé être légèrement rond, avec ce rayon de frontière.