J'essaie de créer une fonctionnalité de sélection de sexe qui contient 3 boutons radio. J'ai fait ce code mais il ne fonctionne pas comme je le souhaite.
Conteneur de bouton radio
Row add_radio_button(int btnValue, String title) { return Row( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Radio( activeColor: Colors.green, value: btnValue, groupValue: -1, onChanged: _handleradiobutton, ), Text(title) ], ); }
Méthode add_radio_button strong>
final _radio_colume_container = Container( margin: const EdgeInsets.fromLTRB(50, 15, 50, 00), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( 'Gender*', ), Row( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ add_radio_button(0, 'Male'), add_radio_button(1, 'Female'), add_radio_button(2, 'Others'), ], ), ], ), );
J'y parviens
Je veux atteindre cet objectif.
3 Réponses :
Vous devriez jeter un œil à RadioListTile
car il fournit une propriété dense
qui aidera à réduire le remplissage entre le bouton et son titre.
Oui, bien sûr, j'essaierai d'abord votre solution, puis si cela fonctionne, je l'accepterai.
List gender=["Male","Female","Other"]; String select; Row addRadioButton(int btnValue, String title) { return Row( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Radio( activeColor: Theme.of(context).primaryColor, value: gender[btnValue], groupValue: select, onChanged: (value){ setState(() { print(value); select=value; }); }, ), Text(title) ], ); } //Use the above widget where you want the radio button child: Row( children: <Widget>[ addRadioButton(0, 'Male'), addRadioButton(1, 'Female'), addRadioButton(2, 'Others'), ], ),
Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire sur la manière et / ou pourquoi il résout le problème améliorerait la valeur à long terme de la réponse.
Après avoir appliqué une refactorisation à partir de la réponse de @ Shubham, présentant une version généralisée du code à des fins multiples.
// Some code Padding( padding: EdgeInsets.only(bottom: 10), child: GenderField(['Male','Female','Other']) )
Dans le main.dart, ce widget peut être appelé comme
import 'package:flutter/material.dart'; /// Requires a list of string ['Male','Female','Other'] only once. class GenderField extends StatelessWidget { final List<String> genderList; GenderField(this.genderList); @override Widget build(BuildContext context) { String select; Map<int, String> mappedGender = genderList.asMap(); return StatefulBuilder( builder: (_, StateSetter setState) => Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisSize: MainAxisSize.min, children: [ Text( 'Gender : ', style: TextStyle(fontWeight: FontWeight.w400), ), ...mappedGender.entries.map( (MapEntry<int, String> mapEntry) => Row( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Radio( activeColor: Theme.of(context).primaryColor, groupValue: select, value: genderList[mapEntry.key], onChanged: (value) => setState(() => select = value), ), Text(mapEntry.value) ]), ), ], ), ); } }
Je ne vois aucune différence, est-ce le rembourrage qui est différent dans les deux images ??
votre objectif est-il de modifier la couleur?
Le rembourrage @ChennaReddy ne vient pas non plus correctement et l'espace entre le bouton radio et le titre est également plus important, je veux réduire cela.
@MazinIbrahim Oui mais je travaillerai là-dessus plus tard, je dois d'abord obtenir cette même mise en page.
Radio
a - la propriétématerialTapTargetSize:
- le rendre -materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,