3

First of all, the solution could be obvious given that I'm a newbie in Flutter, but I've searched for many hours to no avail, so on to the issue. I'm trying to have a markdown description in Flutter, which should be able to be expanded when tapping a chevron.

I have tried AnimatedContainer, AnimatedSize, Flex with Expanded and also tried looking into the warning "It should only be called from paint callbacks or interaction event handlers (e.g. gesture callbacks)." Flutter gives me if I try to get the size of the child before it's painted.

I've taken a look to several places, including StackOverflow questions that I'll link right here:

The next bit of code is where I'm trying to get the animation of expanding/collapsing going. The variable isExpanded is just a boolean and the function _onPressed just toggles a change in that boolean. Based on it I should get the markdown body in its total height or just show a bit of it.

@override
Widget build(BuildContext context) {
  markdown = Markdown(body);
  var icon = (isExpanded) ? Icons.expand_less : Icons.expand_more;
  var iconButton = IconButton(icon: Icon(icon), onPressed: _onPressed);

  return Container(
    child: Column(children: <Widget>[
      AnimatedContainer(
        // constraints: BoxConstraints(), this is where I'd like to set the change from 30% to infinity
        child: SingleChildScrollView(child: markdown),
        curve: Curves.bounceIn,
        duration: Duration(milliseconds: 300),
      ),
      iconButton
    ]),
  );
}

What I'm trying to do is a Trello-like animation. In the phone app, the description of a card is expandable and collapsable. When expanded, it takes just the height it needs, even overflowing the screen. This means the scrollable part is the Widget that contains the description and whatever other widgets there are, not the description itself.

What actually happens is:

  • If I try to set a height (in BoxConstraints) in with MediaQuery and then expand to Size.infinity animation can't be actually handled because it goes from bounded to unbounded.
  • If I try to set the parameter height in the AnimatedContainer to 30% of the screen and then to infinity, when it's infinity the content just disappears.
Aru Díaz
  • 51
  • 1
  • 5
  • you mean something like this https://pastebin.com/raw/ayC779Sv? – pskink Jan 05 '19 at 12:00
  • I'm going to try it right now to see if that works for me, thank you! – Aru Díaz Jan 05 '19 at 12:15
  • No, sorry, everything just disappears, as this exception was thrown: > I/flutter ( 2821): The following assertion was thrown during performLayout(): I/flutter ( 2821): BoxConstraints forces an infinite height. I/flutter ( 2821): These invalid constraints were provided to RenderSemanticsGestureHandler's layout() function by the I/flutter ( 2821): following function, which probably computed the invalid constraints in question: I/flutter ( 2821): RenderConstrainedBox.performLayout – Aru Díaz Jan 05 '19 at 12:20
  • Where you used it? in `Scaffold(body: Test2())` ? – pskink Jan 05 '19 at 12:24
  • No, I just replaced my container with it, the logic seemed fine, but it seems to keep having a problem with unbounded values, for what the error said. – Aru Díaz Jan 05 '19 at 12:26
  • so first try to use it in scaffold's body – pskink Jan 05 '19 at 12:28
  • Hey, you're right! In the scaffold's body it does work, could you elaborate on how this works? Because I just flipped out a bit when the red box worked perfectly. I hope I can use this, too! – Aru Díaz Jan 05 '19 at 12:32
  • So it seems that when I get the widget you provided, `Test2` into a `Column`, it's just not able to render. So maybe it's all related to this, although I do need the `Column`. – Aru Díaz Jan 05 '19 at 12:37
  • I don't know, remove Center maybe (or LayoutBuilder) – pskink Jan 05 '19 at 12:38
  • Nope, it happens too if it's inside a `SingleChildScrollView`. – Aru Díaz Jan 05 '19 at 12:40
  • What I'm seeing too, is that the `biggest` constraint actually means the screen unless there's anything else. What I mean by this is that if the end of the screen is reached, then a Widget inside this `AnimatedContainer` will stop right there and be overflowing, instead of growing beyond the screen. That's a bummer. – Aru Díaz Jan 05 '19 at 12:43
  • sorry without seeing your code I cannot say anything – pskink Jan 05 '19 at 12:46
  • That's no problem, you've helped me a lot already, thank you! – Aru Díaz Jan 05 '19 at 13:42
  • sure, your welcome – pskink Jan 05 '19 at 13:48

1 Answers1

0

Maybe use SizeTransition or ScaleTransition. Here is an answer that take use of the following widgets to collapse and expand a widget.

Adam Jonsson
  • 2,064
  • 1
  • 13
  • 9