How to achieve transparent background in ChoiceChip?

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 :)