RenderFlex overflowed error only appears in the widget test, if i run the app everthing is ok

Question

A minimal reproducible example can be found here: https://github.com/HerrNiklasRaab/repro-widget-test-overflow

My current app looks like this:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    body: DashboardNewsItem(),
  )));
}

class DashboardNewsItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      width: 165,
      height: 100,
      child: Row(
        children: <Widget>[
          Text(
            "Zu Instagram",
          ),
          Icon(Icons.arrow_forward)
        ],
      ),
    );
  }
}

If I run this on the device it looks like the following:

Once I run this with the following widget test:

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:test_ble/main.dart';

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(
        home: Scaffold(
      body: DashboardNewsItem(),
    )));
  });
}

I get this exception:

Counter increments smoke test:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 27 pixels on the right.

The relevant error-causing widget was:
  Row file:///Users/niklasraab/GitHub/test_ble/lib/main.dart:19:14

The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#abc37 OVERFLOWING:
  creator: Row ← ColoredBox ← ConstrainedBox ← Container ← DashboardNewsItem ← _BodyBuilder ←
    MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ←
    DefaultTextStyle ← AnimatedDefaultTextStyle ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=165.0, h=100.0)
  size: Size(165.0, 100.0)
  direction: horizontal
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
ERROR: Test failed. See exception logs above.
The test description was: Counter increments smoke test

Off course I could just wrap the Text inside a Flexible like this:

class DashboardNewsItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      width: 165,
      height: 100,
      child: Row(
        children: <Widget>[
          Flexible(
            child: Text(
              "Zu Instagram",
            ),
          ),
          Icon(Icons.arrow_forward)
        ],
      ),
    );
  }
}

But I should not need to do that, because the Text has enough space on the horizontal axis. So can anyone explain this wired behavior to me?

Answer 1

If you run the test directly on the emulator it'll pass.

flutter run -d emulator test\widget_test.dart

I personally ran it directly on my device and the test passed.

The problem is that it won't pass on all devices. On some devices 165 logical pixels of width might not be enough to contain the Text and the Icon. Probably that's true for the default testing environment that is provided by Flutter. Generally it's a good idea to have your widgets as responsive as possible. Thus, a better implementation would be removing the width and height constraints, constraining the size of the Row instead, and using padding.

class DashboardNewsItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      padding: const EdgeInsets.symmetric(
          horizontal: 24.0, vertical: 16.0), // or any other value
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            "Zu Instagram",
          ),
          Icon(Icons.arrow_forward)
        ],
      ),
    );
  }
}