matthewstyler/configurable_expansion_tile

A Configurable Expansion Tile altered from the flutter material implementation that allows for customization of the internal components.

☕️ Java | 💎 Ruby

configurable_expansion_tile's Issues

How to handle multiple expansion tile close and open on a expansion tile ?

Hi,
Configurable expansion tile helps me today a lot.
I have level expansion tile(beginner, intermediate, advance ) list. When ever one level is clicked. I want all other level to close. Is there any way possible. I tried with making handleTap() public but it didn't work.

header widget alignment

It doesn't seem possible to left-align (text) widgets in the header (though it is possible to left-align children items.

Panel shrinkage problem

How can I click on a shrinking other folding panel?

Manage Alignment of Header?

Maybe I'm overlooking something simple; however, I can't seem to find a way to align the header contents. For example, I want the header's child to be left aligned and the animation trailing widget to be right aligned.

Is there a way to do this or are they forcibly both centered?

Thanks!

it can be get scrollable child

for example you want seprate the main page to two expanded widget with this widget. you need to the children be scrolable but we have not any way for handle this

null safety is here

https://pub.dev/packages/configurable_expansion_tile_null_safety

Needed to call handleTap() from outside function

First off, this widget saved the day, the standard material ExpansionTileList was way limited and not configurable at all, so big thank you.. It would be so easy for them to add more options into the built in one, but they went for material spec only I guess.
Anyways, for my use case, I needed to toggle the tile manually from my own functions and had some difficulty getting there. Using it for a Comments panel with the likes and posts, and we wanted to open it on a long press, then have the Hide Comments button on the bottom of the expanded panel instead of just the Header. I put the ConfigurableExpansionTile in it's own variable, but when calling it, there was no way to manually toggle it, so I took the liberty of hacking your code a bit, and wanted to share..
Needed to make void _handleTap public, so got rid of the underscore inside the State, but that wasn't enough to access it. Inside the StatefulWidget class, I changed the createState part to this:

  static final Animatable<double> _easeOutTween =
      CurveTween(curve: Curves.easeOut);
// Modified here:
  final _ConfigurableExpansionTileState configurableExpansionTile = _ConfigurableExpansionTileState();

  void handleTap() {
    configurableExpansionTile.handleTap();
  }

  @override
  _ConfigurableExpansionTileState createState() => configurableExpansionTile;
      //_ConfigurableExpansionTileState();
}

Easy enough to do, taught myself something, works good now. I can call it from my own GestureDetector with commentTile.handleTap(); like I wanted. It might be nice to add this in your next version release. Thanks for the needed component, think I'm gonna have a few more usages for it.

make rounded ConfigurableExpansionTile

                              decoration: BoxDecoration(
                                // shape: BoxShape.circle,
                                borderRadius: BorderRadius.all(
                                  Radius.circular(32.0),
                                ),
                                color: Colors.black,
                              ),

i have tried and added container instead of header or the widget ConfigurableExpansionTile outside
but the output is not full rounded ...

if i added outside the widget , thats container height would ++ height, i just want to decoration of header , and body is still transparent

my code tried

Expanded(
                      flex: 0,
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(
                            Radius.circular(32.0),
                          ),
                          color: kColorLightBlue,
                        ),
                        margin: EdgeInsets.all(16.0),
                        child: ConfigurableExpansionTile(
                          borderColorStart: Colors.transparent,
                          borderColorEnd: Colors.transparent,
                          bottomBorderOn: true,
                          topBorderOn: true,
                          animatedWidgetFollowingHeader: Icon(
                            Icons.expand_more,
                            color: Colors.white,
                          ),
                          headerExpanded: Flexible(
                            child: Row(
                              children: [
                                Container(
                                  padding: EdgeInsets.all(8.0),
                                  decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                  ),
                                  child: Text(
                                    "HEADER",
                                    style: kTitleText.copyWith(
                                      fontSize: 14.0,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          header: Flexible(
                            child: Row(
                              children: [
                                Container(
                                  padding: EdgeInsets.all(8.0),
                                  child: Text(
                                    "HEADER",
                                    style: kTitleText.copyWith(
                                      fontSize: 14.0,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          // headerBackgroundColorStart: kColorLightBlue,
                          expandedBackgroundColor: Colors.transparent,
                          // headerBackgroundColorEnd: kColorLightBlue,
                          children: [
                            Row(
                              children: [
                                Text("CHILD 1"),
                              ],
                            ),
                            Row(
                              children: [
                                Text("CHILD 2"),
                              ],
                            )
                          ],
                        ),
                      ),
                    ),

three degree expansion

Can this be used to generate three degree list such as below :

• Header 1
  • sub header 1
  • sub header 2
    • onClickSelect 1
    • onClickSelect 2
  • sub header 3
• Header 2
  • sub header 1
    • onClickselect1