ExpansionPanelList.radio icon color-CodePudding

Is there any way to change the color of the icon in ExpansionPanelList.radio? Right now it's grey and it's not visible because the background is grey as well...

ExpansionPanelList.radio(
            expandedHeaderPadding: const EdgeInsets.only(bottom: 5),
            dividerColor: secondaryColor,
            children: widget.items
                .map(
                  (item) => ExpansionPanelRadio(
                      canTapOnHeader: true,
                      headerBuilder: (context, isExpanded) => ListTile(
                            title: Text(
                              item.name,
                              style: defTextStyle,
                            ),
                          ),
                      body: Column(
                        children: [],
                      ),
                      value: item.name),
                )
                .toList(),
          ),

CodePudding user response：

you would need to change this in the item itself. I'm a little confused since I don't see an Icon in anywhere in your code. If you put a ListTile in the body, you can pass your Icon to the trailing parameter like so;

widget.items.map<ExpansionPanelRadio>((Item item) {
    return ExpansionPanelRadio(
        value: item.id,
        headerBuilder: (BuildContext context, bool isExpanded) {
          return ListTile(
            title: Text(item.headerValue),
          );
        },
        body: ListTile(
            title: Text(item.expandedValue),
            subtitle:
                const Text('To delete this panel, tap the trash can icon'),
            trailing: const Icon(Icons.delete),
            onTap: () {
              setState(() {
                _data
                    .removeWhere((Item currentItem) => item == currentItem);
              });
            }));
  }).toList(),

Perhaps something similar to this approach is what you are looking for?

CodePudding user response：

The value is hard-coded, radio tile doesn't takes any argument for it. line 360-368

       Widget expandIconContainer = Container(
        margin: const EdgeInsetsDirectional.only(end: 8.0),
        child: ExpandIcon(
          /// color: you can include color here and pass from constructor. make sure to import material
          isExpanded: _isChildExpanded(index),
          padding: const EdgeInsets.all(16.0),
          onPressed: !child.canTapOnHeader
              ? (bool isExpanded) => _handlePressed(isExpanded, index)
              : null,
        ),
      );

And the color of ExpandIcon depends on ThemeData.brightness, if you dont pass color to it.

  Color get _iconColor {
    if (widget.isExpanded && widget.expandedColor != null) {
      return widget.expandedColor!;
    }

    if (widget.color != null) {
      return widget.color!;
    }

    switch(Theme.of(context).brightness) {
      case Brightness.light:
        return Colors.black54;
      case Brightness.dark:
        return Colors.white60;
    }
  }

the color is passing hard-coded from here to the IconButton. The solution I think of now, create a local file and adding color on expandIconContainer(1st part)

CodePudding user response：

You can always copy the whole expansion_panel.dart into file in your project as custom_expansion_panel.dart. Import it to your file like import '../custom_expansion_panel' as custom. Now in the custom_ file add a parameter Color expansionIconColor; then ctrl f search for 'expandIcon' and it has a color parameter. Just assign expansionIconColor to it and voila, you can pass custom icon color to it.

Use the custom class like: custom.ExpansionPanelList.radio(...

If you want I can create a gist or code snippet for custom expansion panel list.

You can always look at this post for reference- they had similar issue.