3
votes

Implémenter la logique radio / case à cocher aux widgets personnalisés

Je souhaite créer deux widgets. Les deux affichent une grille à 2 colonnes avec des boutons pouvant être sélectionnés / désélectionnés. L'un devrait avoir une logique radio (sélection unique) alors que l'autre devrait avoir une logique de case à cocher (sélection multiple).

Voici mon implémentation Android que j'essaie de recréer dans Flutter:

J'ai essayé d'utiliser un GridView avec RadioListTiles, pensant que je pourrais remplacer l'icône RadioButton avec mon propre widget tout en conservant la logique. Je ne vois aucun moyen de faire ça. J'ai également réalisé que GridView dans Flutter n'emballe pas automatiquement ses enfants, ce qui fait que chaque vignette radio n'occupe que les 10 premiers% de la cellule entière.

C'est là que je suis en ce moment: p >

class RadioSelect extends StatefulWidget {
    final QuestionData question;

    RadioSelect({this.question});

    @override
    RadioSelectState createState() => RadioSelectState(question);
}

class RadioSelectState extends State<RadioSelect> {
  RadioSelectState(this._question);

  final QuestionData _question;
  final SliverGridDelegate delegate = 
    SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2);
  int _selectedIndex;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: delegate,
      padding: EdgeInsets.all(0),
      itemCount: _question.selectOptions.length,
      itemBuilder: (context, index) {
        return RadioListTile(
          groupValue: _selectedIndex,
          title: Text(_question.selectOptions[index]),
          value: index,
          onChanged: (newIndex) {
           setState(() {
              _selectedIndex = newIndex;
            });
          },
        );
      },
    );
  }
}

Résultat:

entrez la description de l'image ici

Je veux suivre le plus "Fluttery" manière possible. Selon vous, quelle est ma meilleure cause d’action?


0 commentaires

3 Réponses :


0
votes

J'ai également rencontré le même problème, mais le flutter ne semble pas fournir de widget comme celui-ci. Essayez d'utiliser la radio personnalisée, un plugin tiers.

https://pub.dev/packages/custom_radio


0 commentaires

0
votes

Essayez d'utiliser les widgets FilterChip et ChoiceChip. Le FilterChip implémentera une logique de case à cocher (sélection multiple), tandis que le ChoiceChip se comporte comme un bouton radio. Les deux widgets vous permettront d'utiliser des widgets personnalisés pour s'adapter à votre interface utilisateur.


0 commentaires

0
votes

J'ai créé ce package dans ce but. Allez voir ça. Plug-in de bouton radio de groupe

https://github.com/Dineth95/radio_grouped_buttons

Container(
                padding: EdgeInsets.all(10),
                width: MediaQuery.of(context).size.width,
                height: 160,
                child: CustomRadioButton(
                  buttonLables: buttonList,
                  buttonValues: buttonList,
                  radioButtonValue: (value)=>print(value),
                  horizontal: true,
                  enableShape: true,
                  buttonSpace: 5,
                  buttonColor: Colors.white,
                  selectedColor: Colors.cyan,
                ),
              ),

En utilisant ce widget, vous pouvez faire tout ce que vous voulez


2 commentaires

Ça a l'air mignon. Je vais le vérifier la prochaine fois que je rencontre le besoin d'un bouton radio. Pouvez-vous également sélectionner plusieurs cases?


En tant que première version, j'ai ajouté uniquement des fonctionnalités radio et j'ajouterai cette fonctionnalité à l'avenir.