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