Question 76676 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter animated Row overflow inside box smaller than a child

There is a box in which I need to animate a child consisting of a Row in which there are two Text. (In short – running line). Both texts in the result must be on the same line.

The child I want to animate is wider than the parent anyway and when animating, an overflow error pops up.

Overflow error

enter image description here

How can this be avoided?

This is code:

  final Widget content = SizedBox(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text('TEXT 1'),
        Text('TEXT 2')
      ],
    ),
  );

  @override
  Widget build(BuildContext context) {
    return
      Container(
        alignment: Alignment.center,
        width: widget.parentWidth,
        height: UI_SIZE,
        child: ClipPath(
          clipBehavior: Clip.hardEdge,
          child: SlideTransition(
            position: _offsetAnimation,
            child: content,
          ),
        ),
      );
  }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to fix it with OverflowBox.

    final Widget content = OverflowBox(
  maxWidth: double.infinity,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      Text('TEXT 1'),
      Text('TEXT 2')
    ],
  ),
);

    Maybe someone will help this solution


  2. 0

    try this

    final Widget content = SizedBox(
child: Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
   Expanded(child: Text('TEXT 1'),),
   Expanded(child: Text('TEXT 2'),),
  ],
),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search