TextField inside Row throws layout exception: unable to calculate size

Question

I get a display exception that I don't understand how to fix. I am trying to create a column with three rows.

String [Image]

String [TextField]

String [Buttons]

Here is my code to build the container:

Container buildEnterAppContainer(BuildContext context) { var container = new Container( padding: const EdgeInsets.all(8.0), child: new Column( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ buildImageRow(context), buildAppEntryRow(context), buildButtonRow(context) ], ), ); return container; } 

and my buildAppEntryRow code for a text container

 Widget buildAppEntryRow(BuildContext context) { return new Row( children: <Widget>[ new TextField( decoration: const InputDecoration(helperText: "Enter App ID"), style: Theme.of(context).textTheme.body1, ) ], ); } 

On startup, I get the following exception:

 I/flutter ( 7674): BoxConstraints forces an infinite width. I/flutter ( 7674): These invalid constraints were provided to RenderStack layout() function by the following I/flutter ( 7674): function, which probably computed the invalid constraints in question: I/flutter ( 7674): RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:256:13) I/flutter ( 7674): The offending constraints were: I/flutter ( 7674): BoxConstraints(w=Infinity, 0.0<=h<=Infinity) 

If I change buildAppEntryRow only to TextField, and here

  Widget buildAppEntryRow2(BuildContext context) { return new TextField( decoration: const InputDecoration(helperText: "Enter App ID"), style: Theme.of(context).textTheme.body1, ); } 

I no longer get the exception. What am I missing in the implementation of Row, because of which it will not be able to calculate the size of this row?

Answer 1

(I assume you are using Row , because in the future you want to put other widgets next to TextField .)

The Row widget wants to determine the internal size of its inflexible children so that it knows how much space is left for the flexible. However, the TextField has no internal width; he only knows how to configure himself to the full width of his parent container. Try wrapping it in Flexible or Expanded to tell Row that you expect TextField take up the remaining space:

  new Row( children: <Widget>[ new Flexible( child: new TextField( decoration: const InputDecoration(helperText: "Enter App ID"), style: Theme.of(context).textTheme.body1, ), ), ], ), 

Answer 2

you must use Flexible to use the text field inside the string.

 new Row( children: <Widget>[ new Text("hi there"), new Container( child:new Flexible( child: new TextField( ), ),//flexible ),//container ],//widget ),//row 

Answer 3

The accepted answer does not seem to fix a very similar problem for me, so maybe this is not all, or I am not applying this solution correctly. Here is the application code:

 import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new Scaffold( body: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Column( children: [ Expanded( child: Column( children: [ new Flexible( child: new TextFormField() ) ] ) ) ] ) ] ) ) ); } } 

I have a TextFormField wrapped in Flexible, but the error is still happening.

An exception has occurred. BoxConstraints forces infinite width. These invalid constraints were provided by the RenderRepaintBoundary layout () function with the following function, which probably calculated the invalid constraints:
_RenderDecoration._layout.layoutLineBox (package: flutter / src / material / input_decorator.dart: 815: 11). Offensive restrictions were: BoxConstraints (w = Infinity, 0.0 <= h <= 683.4)

My doctor's flutter output is as follows:

[flutter] flutter doctor Summary of the doctor (to see all the details, run flutter doctor -v): [√] Flutter (beta version of the beta version, v0.9.4, on Microsoft Windows [version 10.0.17134.345], locale en-US ) [! ] Android toolchain - development for Android devices (Android SDK 28.0.3). Android X license status is unknown. [√] Android Studio (version 3.1) [√] Connected devices (1 available)

! The doctor found problems in category 1. exit code 0

Answer 4

A simple solution is to wrap Text() inside Container() . So your code will look like this:

 Container( child: TextField() ) 

Here you can also get the width and height attribute of the container to customize the look of your text box. No need to use Flexible if you wrap your text box inside a container.

Answer 5

Since @Asif Shiraz mentioned that I had the same problem and solved it by wrapping the column flexible, like this:

 class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new Scaffold( body: Row( children: <Widget>[ Flexible( child: Column( children: <Widget>[ Container( child: TextField(), ) //container ], )) ], mainAxisAlignment: MainAxisAlignment.spaceBetween, ), )); } } 

Answer 6

The solution is to wrap your Text() in one of the following widgets: Expanded or Flexible . So your code using Expanded will look like this:

 Expanded( child: TextField( decoration: InputDecoration( hintText: "Demo Text", hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red) ), ), ), 

Answer 7

You get this error because the TextField expands in the horizontal direction, like the Row , so we need to limit the width of the TextField , there are many ways to do this.

1. Use Expanded

     Row( children: <Widget>[ Expanded(child: TextField()), OtherWidget(), ], ) 

2. Use Flexible

    Row( children: <Widget>[ Flexible(child: TextField()), OtherWidget(), ], ) 

3. Wrap it in a Container or SizedBox and provide a width

    Row( children: <Widget>[ SizedBox(width: 100, child: TextField()), OtherWidget(), ], )