1
votes

Comment obtenir ce type de bouton radio en scintillement

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.

flutter flutter-layout flutter-dependencies

5 commentaires

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,

3 Réponses :

1
votes

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.

1 commentaires

Oui, bien sûr, j'essaierai d'abord votre solution, puis si cela fonctionne, je l'accepterai.

2
votes

  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'),
                ],
              ),

1 commentaires

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.

0
votes

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)
                ]),
          ),
        ],
      ),
    );
  }
}

0 commentaires