Correctly layout columns and expanded widgets without finite width

Question

I need help to understand why Rows, Columns and Expanded need a finite width constraint in this kind of layout.

The layout to me seems very simple: two columns should divide equally the total device width, in every column there must be a fixed width label and a textfield which should take the remaining column width:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Row(
          children: [
            Column(
              children: [
                Row(children: [
                  Text('Field 1:'),
                  Expanded(
                    child: TextField(),
                  ),
                ]),
              ],
            ),
            Column(
              children: [
                Row(children: [
                  Text('Field 2:'),
                  Expanded(
                    child: TextField(),
                  ),
                ]),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

Of course i get this error:

    flutter: The following assertion was thrown during performLayout():
    flutter: RenderFlex children have non-zero flex but incoming width constraints are unbounded.
    flutter: When a row is in a parent that does not provide a finite width constraint, for example if it is in a
    flutter: horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a
    flutter: flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
    flutter: space in the horizontal direction.

[...]

What's the best strategy to avoid setting a fixed width letting columns and expanded do their job?

EDIT:

I changed my code wrapping Column widgets inside an Expanded widget. That did the job, this code is not throwing errors:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Row(
          children: [
            Expanded(
              child: Column(
                children: [
                  Row(children: [
                    Text('Field 1:'),
                    Expanded(
                      child: TextField(),
                    ),
                  ]),
                ],
              ),
            ),
            Expanded(
              child: Column(
                children: [
                  Row(children: [
                    Text('Field 2:'),
                    Expanded(
                      child: TextField(),
                    ),
                  ]),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

score 0 · Accepted Answer · answered Jul 19 '20 at 13:52

The error is thrown because TextField is trying to occupy the entire width.

Following the explanation given on this answer, wrapping TextField with Flexible works.

import 'package:flutter/material.dart';

class SO62977964 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('SO 62977964'),
        ),
        body: Row(
          children: [
            Expanded(
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Flexible(
                        child: Text('Field 1'),
                      ),
                      Flexible(
                        child: TextField(
                          decoration:
                              InputDecoration(hintText: 'Enter Field 1'),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Expanded(
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Flexible(
                        child: Text('Field 2'),
                      ),
                      Flexible(
                        child: TextField(
                          decoration:
                              InputDecoration(hintText: 'Enter Field 2'),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Thanks for your answer, you changed a bit the code since using only Flexible to wrap textfields does not solve the error. Anyway your code suggested me the right correction putting Expanded outside each column. — Ansharja, Jul 19 '20 at 16:01
Yes i changed the nesting a bit by trial and error. @Ansharja Initially i tried your original code on dartpad but couldn't find and fix the issue. While re-writing on android studio came across the error after adding `TextField` to the layout. — dev-aentgs, Jul 19 '20 at 17:21

Correctly layout columns and expanded widgets without finite width

1 Answers1