Flutter error: RenderFlex with multiple children has a null textDirection

Question

I'm testing a widget that includes the following code (adapted from here):

await tester.pumpWidget(
  MediaQuery(
    data: const MediaQueryData(devicePixelRatio: 1.0),
    child: FocusScope(
      node: focusScopeNode,
      autofocus: true,
      child: Row(
        children: <Widget>[
          MongolEditableText(
            key: key1,
            controller: TextEditingController(),
            focusNode: focusNode,
            style: const TextStyle(fontSize: 9),
            cursorColor: cursorColor,
          ),
          MongolEditableText(
            key: key2,
            controller: TextEditingController(),
            focusNode: focusNode,
            style: const TextStyle(fontSize: 9),
            cursorColor: cursorColor,
          ),
        ],
      ),
    ),
  ),
);

But when I do I get the following exception:

Horizontal RenderFlex with multiple children has a null textDirection, so the layout order is undefined.

I tried adding a textDirection parameter to my custom widget that I'm testing but that didn't change anything.

I found the answer here, so I'm adding an answer below.

Answer 1

A flex widget like Row or Column needs to know the text direction of its children. There are three ways to do that.

1. Use a WidgetsApp ancestor

MaterialApp and CupertinoApp use WidgetsApp internally. These all provide a default directionality.

MaterialApp(
  home: MyWidgetTree(
    child: Row(
      children: <Widget>[

2. Wrap with a Directionality widget

You can also wrap the row with a Directionality widget and give it a direction like this:

Directionality(
  textDirection: TextDirection.ltr,
  child: Row(
    children: <Widget>[

3. Add a textDirection property

You can give the Row a direction using the textDirection property:

Row(
  textDirection: TextDirection.ltr,
  children: <Widget>[

Source

Thanks to this comment for the help.