CODEWITHSUNDEEP
user-interfacelayoutdartflutter
nesbocaj
nesbocaj

Reputation: 1783

Sizing a dynamically sized Widget by a factor

I'm trying to set the heightFactor of a dynamically sized Widget (for animation purposes), in this case a Text:

Stack(
  children: <Widget>[
    Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        FractionallySizedBox(
          heightFactor: 0.5,
          child: Text(
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
          ),
        ),
      ],
    ),
    Positioned.fill(
      child: Center(
        child: Text(
          "Lorem ipsum".toUpperCase(),
        ),
      ),
    ),
  ],
);

that however results in the following exception:

I/flutter ( 7123): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 7123): The following assertion was thrown during performLayout():
I/flutter ( 7123): BoxConstraints forces an infinite height.
I/flutter ( 7123): These invalid constraints were provided to RenderParagraph's layout() function by the following
I/flutter ( 7123): function, which probably computed the invalid constraints in question:
I/flutter ( 7123):   RenderFractionallySizedOverflowBox.performLayout
I/flutter ( 7123):   (package:flutter/src/rendering/shifted_box.dart:909:13)
I/flutter ( 7123): The offending constraints were:
I/flutter ( 7123):   BoxConstraints(w=272.0, h=Infinity)

And wrapping the Text in either LimitedBox or ConstrainedBox seems to only change what the invalid constraints were provided to in the error message.

Nor does adding MainAxisSize.min to Column.mainAxisSize seem to make a difference.

Is there a way to accomplish this that avoids the error?

Upvotes: 4

Views: 704

Answers (1)

rmtmckenzie
rmtmckenzie

Reputation: 40443

A FractionallySizedBox sizes itself to its parent. Because you're using a column within a stack it doesn't really have a limit on infinite height. Since infinity / 2 == infinity your text therefore also has an infinite height.

If you switch to using an align, you can size your object to the text rather than the parent.

Upvotes: 4

Related Questions