Flutter Row widget solve RenderFlex overflow by cutting off remaining area

Question

There are a lot of questions here already about Renderflex overflow, but I believe my use case might be a bit different.

Just the usual problem - having a Widget that is too big in a Row widget, and I get the A RenderFlex overflowed by X pixels ... error.

I want to create a Row that cuts off it's overflowing child Widget if they would be rendered outside it's area without getting an error.

First off, wrapping the last element in the Row widget with Expanded or Flexible does not work in my case, as recommended here and here and many other places. Please see code and image:

class PlayArea extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final dummyChild = Container(
      color: Colors.black12,
      width: 100,
      child: Text('important text'),
    );

    final fadeContainer = Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
          colors: [
            Colors.black26,
            Colors.black87,
          ],
        ),
      ),
      width: 600,
    );

    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Container(
        color: Colors.redAccent,
        child: Column(children: [
          Expanded(
            child: Row(
              children: <Widget>[
                dummyChild,
                fadeContainer,
              ],
            ),
          ),
          Expanded(
            child: Row(
              children: <Widget>[
                dummyChild,
                Expanded(
                  child: fadeContainer,
                ),
              ],
            ),
          ),
          Expanded(
            child: Row(
              children: <Widget>[
                Container(
                  color: Colors.black12,
                  width: 1100,
                  child: Text('important text'),
                ),
                Expanded(
                  child: fadeContainer,
                ),
              ],
            ),
          ),
        ]),
      ),
    );
  }
}

Key points:

• Using Expanded changes the width of Container, which changes the gradient's slope. I want to keep the gradient as it is
• Even with Expanded widget, the Row is not prepared for the case when important text's area is too wide and does not fit the screen horizontally - it will get an overflow error for that Widget
• it is technically working in the first case, because no red color is drawn on the right side on the green field, it 'just' has an error

---

How do I cut off the remaining space dynamically without any error - regardless of any screen size and content?

Answer 1

One solution I found is that

Row(
    children: <Widget>[
        dummyChild,
        fadeContainer,
    ],
)

can be converted to

ListView(
    scrollDirection: Axis.horizontal,
    physics: const NeverScrollableScrollPhysics(),
    children: <Widget>[
        dummyChild,
        fadeContainer,
    ],
)

Creating a horizontal list and preventing scroll on that.

---

edit.: just found out it that you'll get unbounded vertical height, so it's not the same.