3
votes

Comment créer un emballage avec ChoiceChip avec des étiquettes personnalisées dans Flutter

J'apprends le flutter , mais il y a des choses que je ne trouve nulle part.

Par exemple, je souhaite créer un groupe de ChoiceChips , similaire à l'image

mais je ne sais pas comment mettre des étiquettes personnalisées dans ce type de puces.

Comment puis-je rendre cela possible?

 import 'package:flutter/material.dart';

 class MyThreeOptions extends StatefulWidget {
  @override
   _MyThreeOptionsState createState() => _MyThreeOptionsState();
}

  class _MyThreeOptionsState extends State<MyThreeOptions> {
  int _value = 0;

  // ----What I want to appear----//
  /*void v (int index){
   switch (index){
   case 0: Text('Phones');
   break;

   case 1: Text('Computers');
   break;

   case 2: Text('Accessories');
   break;
   }}*/

  @override
  Widget build(BuildContext context) {
  return Wrap(
  alignment: WrapAlignment.center,
  spacing: 12.0,
  children: List<Widget>.generate(
  3,
      (int index) {
      return ChoiceChip(
       pressElevation: 0.0,
       selectedColor: Colors.blue,
       backgroundColor: Colors.grey[100],
       label: Text("item $index"),
       selected: _value == index,
       onSelected: (bool selected) {
        setState(() {
          _value = selected ? index : null;
        });
      },
    );
  },
 ).toList(),
 );}
}

flutter android-chips choice

0 commentaires

4 Réponses :

2
votes

Il vous suffit de créer votre propre widget avec une mise en page de votre choix et de mettre comme étiquette de votre puce.

// Your custom widget...
class CustomChipLabel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4.0,
      child: Row(
        children: <Widget>[
          IconButton(
              iconSize: 40.0,
              icon: Icon(Icons.person),
              onPressed: null),
          Text("My Custom Chip", style: TextStyle(
            fontSize: 20.0,

          ),),
        ],
      )
    );
  }
}

Wrap(
  children: <Widget>[
    ChoiceChip(
      selected: _isSelected
      label: CustomChipLabel(), // your custom label widget
    ),
  ],
);

2 commentaires

Merci pour votre réponse, mais je ne comprends pas comment avec cette méthode vous pouvez avoir plus d'une puce. Devriez-vous créer un widget pour chaque puce?. Je pense qu'il doit y avoir un autre moyen plus efficace.

Oui, vous devez créer un widget pour chaque étiquette de puce. Mais si l'étiquette est la même dans de nombreuses puces, vous pouvez utiliser la même instance pour elles.

0
votes

Ok, j'ai découvert un moyen, mais je pense qu'il doit y avoir un moyen plus efficace, créer une liste de chaînes et passer les valeurs, mais je ne peux pas l'encoder. Si quelqu'un connaît un moyen plus efficace de mener à bien cette action, sa contribution est appréciée.

class MyThreeOptions extends StatefulWidget {
 @override
 _MyThreeOptionsState createState() => _MyThreeOptionsState();
 }

class _MyThreeOptionsState extends State<MyThreeOptions> {
int _value = 0;

@override
Widget build(BuildContext context) {
return Wrap(
  alignment: WrapAlignment.center,
  spacing: 12.0,
  children: <Widget>[
    ChoiceChip(
      pressElevation: 0.0,
      selectedColor: Colors.blue,
      backgroundColor: Colors.grey[100],
      label: Text("Phones"),
      selected: _value == 0,
      onSelected: (bool selected) {
        setState(() {
          _value = selected ? 0 : null;
        });
      },
    ),
    ChoiceChip(
      pressElevation: 0.0,
      selectedColor: Colors.blue,
      backgroundColor: Colors.grey[100],
      label: Text("Computers"),
      selected: _value == 1,
      onSelected: (bool selected) {
        setState(() {
          _value = selected ? 1 : null;
        });
      },
    ),
    ChoiceChip(
      pressElevation: 0.0,
      selectedColor: Colors.blue,
      backgroundColor: Colors.grey[100],
      label: Text("Accesories"),
      selected: _value == 2,
      onSelected: (bool selected) {
        setState(() {
          _value = selected ? 2 : null;
        });
      },
    ),
  ],
);
}
}

0 commentaires

-2
votes

 class CustomChoiceChip extends StatelessWidget {

    final String text;

    CustomChoiceChip({this.text});

    @override
    Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
      decoration: BoxDecoration(
      color: Colors.black54,
      borderRadius: BorderRadius.all(Radius.circular(20.0))),
      child: Text(
        text,
        style: TextStyle(color: Colors.white, fontSize: 12.0),
      ),
    );
   }
   }

1 commentaires

celui-ci est facile

2
votes

import 'package:flutter/material.dart';
class ChoiceChips extends StatefulWidget {
  final List chipName;
  ChoiceChips({Key key, this.chipName}) : super(key: key);

  @override
  _ChoiceChipsState createState() => _ChoiceChipsState();
}

class _ChoiceChipsState extends State<ChoiceChips> {
  String _isSelected = "";

  _buildChoiceList() {
    List<Widget> choices = List();
    widget.chipName.forEach((item) {
      choices.add(Container(
        child: ChoiceChip(
          label: Text(item),
          labelStyle: TextStyle(color: Colors.white),
          selectedColor: Colors.pinkAccent,
          backgroundColor: Colors.deepPurpleAccent,
          selected: _isSelected == item,
          onSelected: (selected) {
            setState(() {
              _isSelected = item;
            });
          },
        ),
      ));
    });
    return choices;
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 5.0,
      runSpacing: 3.0,
      children: _buildChoiceList(),
    );
  }
}

1 commentaires

J'espère que ça aide! Ce que je recherche, c'est comment obtenir les valeurs de la puce sélectionnée afin de pouvoir la stocker dans la chaîne où j'utilise ce widget.