Sunday, 27 December 2020

Simple expandable column on Flutter wont have Title > expandable too

I'm trying to make an Expandable Column. That is, it has 2 children: the child and the expanded child that appears when the widget is expanded.

In the picture below, you see the child (blue) and expanded child (red) which should only appear when the Expand > button is clicked.

enter image description here

Everything is working, but no mater what I do, I cannot get the Expand > button to work like this: Expand > when not expanded, and Expand (lots of spaces) < when expanded.

This is the code of the Expand button:

      Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            //Expanded() would be the solution here, but it breaks cause it's inside ListView
            Container(
              child: Container(
                margin: const EdgeInsets.only(left: 12, top: 15),
                child: Text(this.title,
                    style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.w700,
                        fontFamily: 'Roboto',
                        color: Colors.white)),
              )),
            //Expanded() would be the solution here, but it breaks cause it's inside ListView
            Container(
              child: Container(
                  margin: const EdgeInsets.only(right: 7, top: 15),
                  child: expanded != null && expanded
                      ? Icon(Icons.arrow_back_ios_outlined,
                      color: Colors.grey)
                      : Icon(Icons.arrow_forward_ios,
                      color: Colors.grey))),
        ])

The obvious solution would be to make this Row have 2 Expanded children instead of 2 Container, but if you do that everything brakes because it's inside a ListView scrollable horizontally, so it tries to expand forever.

Entire code in Dartpad:

https://dartpad.dev/dccfb8c0efa98f5da64eca625ccf1487

If you substitute Container() by Expanded() as I mentioned, the layout wont render.

I've been thinking for a long time on how to fix this, but the ExpandableListTitle can't possibly know the size of its parent since the size of its parent depends on the size of the children: expanded and not expanded.

PS: The ListView cannot be changed by a Row, I really need to scroll between these expandable widgets horizontally.

PS: I'll give 200 points of bounty to anyone who solves this + upvote + accept answer.

PS: bounty goes to the answer below, I accidentally selected "draw more attention"



from Simple expandable column on Flutter wont have Title > expandable too

No comments:

Post a Comment