How to achieve transparent background in ChoiceChip? - flutter

Question

I am creating a set of selections using ChoiceChip widget. I wanted to make the chips to have transparent background under certain condition like this image
I tried putting backgroundColor: Colors.transparent, but it'll turn white instead of transparent.
Here is my codes:
String _selectedSize = "";
var sizes = ['XS', 'S', 'M', 'L', 'XL'];
_customChip(size) => InkWell(
child: Container(
width: 40.0,
height: 40.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.white,
),
child: Stack(
children: <Widget>[
Center(child: Text(size, style: _chipTextStyle,)),
Center(
child: RotationTransition(
turns: AlwaysStoppedAnimation(315/360),
child: Container(height: 1.0, color: Colors.grey),
),
),
],
),
),
);
return Wrap(
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
children: sizes.map((size) {
return ChoiceChip(
pressElevation: 1.0,
backgroundColor: Colors.transparent, // this doesn't work
label: _customChip(size),
labelPadding: EdgeInsets.symmetric(horizontal: 2.0),
padding: EdgeInsets.all(2.0),
materialTapTargetSize: MaterialTapTargetSize.padded,
shape: CircleBorder(),
selected: _selectedSize == size,
selectedColor: _themeColor,
onSelected: (isSelected) {
setState(() {
_selectedSize = size;
});
},
);
}).toList(),
);
Is there any idea how to make it transparent, or I should use widgets other than ChoiceChip? Thanks!

Answer 1

The Chip widget has a material which is colored according to the Theme. You can change that by changing the Theme.canvasColor, like this:
Theme(
data: ThemeData(canvasColor: Colors.transparent),
child: Chip(
label:Container(/*your widget*/),
backgroundColor: Colors.transparent, // or any other color
),
)
Or, you can keep your old Theme (except the canvasColor) by doing this:
Theme(
data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
child: Chip(
label: Container(/*your widget*/),
backgroundColor: Colors.transparent, // or any other color
),
)

Answer 2

I have tried so many thigns with ChoiceChips for transparent background and not getting success then i decided to do it in another way as you also asked for alternate option, so i have created example for you where it similarly works same as ChoiceChips:
Note: For unselected background color i used
"Colors.grey.withOpacity(0.1)" but you can also use
"Colors.transparent"
import 'package:flutter/material.dart';
class MyChoiceChipsRadio extends StatefulWidget {
createState() {
return CustomRadioState();
}
}
class CustomRadioState extends State<MyChoiceChipsRadio> {
List<RadioModel> sampleData = List<RadioModel>();
#override
void initState() {
// TODO: implement initState
super.initState();
sampleData.add(RadioModel(false, 'XS'));
sampleData.add(RadioModel(false, 'S'));
sampleData.add(RadioModel(false, 'M'));
sampleData.add(RadioModel(false, 'L'));
sampleData.add(RadioModel(false, 'XL'));
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ListItem"),
),
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/back_image.png"),
fit: BoxFit.cover,
),
)
),
ListView.builder(
itemCount: sampleData.length,
itemBuilder: (BuildContext context, int index) {
return InkWell(
//highlightColor: Colors.red,
splashColor: Colors.blueAccent,
onTap: () {
setState(() {
sampleData.forEach((element) => element.isSelected = false);
sampleData[index].isSelected = true;
});
},
child: RadioItem(sampleData[index]),
);
},
),
],
),
);
}
}
class RadioItem extends StatelessWidget {
final RadioModel _item;
RadioItem(this._item);
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(15.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
height: 50.0,
width: 50.0,
child: Center(
child: Text(_item.buttonText,
style: TextStyle(
color:
_item.isSelected ? Colors.red : Colors.grey,
//fontWeight: FontWeight.bold,
fontSize: 18.0)),
),
decoration: BoxDecoration(
color: _item.isSelected
? Colors.white
: Colors.grey.withOpacity(0.1),
shape: BoxShape.circle,
border: Border.all(color: _item.isSelected
? Colors.red
: Colors.grey, width: 1.0)
),
),
],
),
);
}
}
class RadioModel {
bool isSelected;
final String buttonText;
RadioModel(this.isSelected, this.buttonText);
}
Hope it helps :)