Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

flutter: how to remove icon from expansion panel

Tags:

flutter

dart

in flutter expansion panel, there is a icon on it by default
i want to remove the icon from expansion panel
flu

how i'm gonna do this? here is my code

ExpansionPanelList(
        expansionCallback: (int index, bool isExpanded) {},
        children: [
          ExpansionPanel(

            headerBuilder: (BuildContext context, bool isExpanded) {
              return Stack(children: [
                ListTile(//and the rest of code...
like image 232
Weiß Schneider Avatar asked Aug 16 '20 13:08

Weiß Schneider


People also ask

How to remove icon from Expansion panel in flutter?

the only way to do it is by editing the ExpansionPanel source code. I added a new property called hasIcon and set it by default to true (to make sure it will not break the code).

How to create an expansionpanel list in flutter?

To show such a list flutter gives a widget called ExapansionPanelList. In this list, every child is an ExpansionPanel widget. We can’t utilize different widgets as children for this list. We can deal with the adjustment of state ( Expansion or collapse ) of a thing with the assistance of ExpansionCallback property.

What is exapansionpanellist in flutter?

It is a material widget in flutter which is like listView. It can just have Expansion panels as children. In certain cases, we may need to show a list where the children can expand/collapse to show/hide some detailed data. To show such a list flutter gives a widget called ExapansionPanelList. In this list, every child is an ExpansionPanel widget.

How do I use the expansionpanellist constructor?

To utilize ExpansionPanelList, you need to call the constructor underneath: > children: This property is used by the children of the expansion panel List. They are laid out similarly to [ListBody]. > expansionCallback: This property is used to the callback that gets called whenever one of the expand/collapse buttons is pressed.

How to show the header details of the expansion panel?

The extension panel list shows your children by clicking on the item and animating the extension. In simple words, it means to show the header details of the expansion panel. HeaderBuilder: The header builder property is used to design the visible portion of the title of the list.


Video Answer


2 Answers

the only way to do it is by editing the ExpansionPanel source code.

I added a new property called hasIcon and set it by default to true (to make sure it will not break the code).

    ExpansionPanel(
      hasIcon: false,       // <------
      canTapOnHeader: true,
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text(
            'Title',
          ),
        );
      },
      body: Container(),    // <------
      isExpanded: false,    // <------
    ),

and here is how you edit the source code:

Press CTRL + click on ExpansionPanel widget, then search for

this.isExpanded = false,

and add below it

this.isExpanded = false,
this.hasIcon = true,

then search for

final bool isExpanded;

and add below it

final bool isExpanded;
final bool hasIcon;

finally, search for

  Widget header = Row(
    children: <Widget>[
      Expanded(
        child: AnimatedContainer(
          duration: widget.animationDuration,
          curve: Curves.fastOutSlowIn,
          margin: _isChildExpanded(index) ? widget.expandedHeaderPadding : EdgeInsets.zero,
          child: ConstrainedBox(
            constraints: const BoxConstraints(minHeight: _kPanelHeaderCollapsedHeight),
            child: headerWidget,
          ),
        ),
      ),
      expandIconContainer,
    ],
  );

and replace it

  Widget header = Row(
    children: <Widget>[
      Expanded(
        child: AnimatedContainer(
          duration: widget.animationDuration,
          curve: Curves.fastOutSlowIn,
          margin: _isChildExpanded(index) ? widget.expandedHeaderPadding : EdgeInsets.zero,
          child: ConstrainedBox(
            constraints: const BoxConstraints(minHeight: _kPanelHeaderCollapsedHeight),
            child: headerWidget,
          ),
        ),
      ),
      Container(
          child: child.hasIcon? expandIconContainer:null,
      ),
    ],
  );
like image 56
Hussam Dev Avatar answered Oct 25 '22 07:10

Hussam Dev


This works,

Just add SizedBox.shrink() to the trailing properties of ExpansionTile

   ExpansionTile(
              trailing: SizedBox.shrink(),
              title: Text(
                "Title",
                style: TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.bold
                ),
              ),
              children: <Widget>[
                ExpansionTile(
                  title: Text(
                    'Sub title',
                  ),
                  children: <Widget>[
                    ListTile(
                      title: Text('data'),
                    )
                  ],
                ),
                ListTile(
                  title: Text(
                    'data'
                  ),
                )
              ],
            ),
like image 39
Mr Random Avatar answered Oct 25 '22 08:10

Mr Random