How to create a wrap with ChoiceChip with custom labels in Flutter

JeCr picture JeCr · Feb 2, 2019 · Viewed 11.2k times · Source

I'm learning flutter but there are some things that I cannot find anywhere.

For example, I want to make a group of ChoiceChips, similar to the picture

enter image description here

but I don't know how to put custom labels in this kind of chips.

How can I make it 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(),
 );}
}

Answer

Marcos Boaventura picture Marcos Boaventura · Feb 2, 2019

You just need create your own widget with a layout of your desire and put as label of your Chip.

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