[Solved] An InputDecorator, which is typically created by a TextField, cannot have an unbounded width

In this post we are going to show you the cause and solution of the error "An InputDecorator, which is typically created by a TextField, cannot have an unbounded width" Error which is caused by TextField() or TextFormField() widget.

Error Message:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════════════
The following assertion was thrown during performLayout():
An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.
This happens when the parent widget does not provide a finite width constraint. For example, if the
InputDecorator is contained by a Row, then its width must be constrained. An Expanded widget or a
SizedBox can be used to constrain the width of the InputDecorator or the TextField that contains it.
'package:flutter/src/material/input_decorator.dart':
Failed assertion: line 959 pos 7: 'layoutConstraints.maxWidth < double.infinity'

Either the assertion indicates an error in the framework itself, or we should provide substantially
more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was:
  TextField TextField:file:///C:/flutter_apps/testapp/lib/main.dart:34:23

Cause of Error:

This error happens when TextField() and TextFormField() widgets are placed inside the Parent widget which has no constrained widget. For example:

Row(
  children: [
    TextField(),
  ],
)

In the case of TextField or TextFormField inside Positioned() widget too, you may get this error:

Positioned(
  bottom:0,
  child: TextField()
) //Error: An InputDecorator, which is typically 
  //created by a TextField, cannot have an unbounded width.

Here, TextField() takes the width of Row() but Row() has infinite width. 

Solution of Error:

To solve this error, TextField() or TextFormField() must have parents with finite or bounded width. For example, you can wrap TextField() with Expanded() widget.

Row(
  children: [
    Expanded(
      child:TextField()
    )
  ],
)

Here, Expanded takes the width of maximum to the width of the screen, and TextField() widget inside it will have bounded height. 

OR, wrap TextField() width with Flexible() widget.

Row(
  children: [
    Flexible(
      child:TextField()
    )
  ],
)

If you are using TextField or TextFormField() inside Positioned() widget, then place your widget like below:

Positioned(
  bottom:100,
  left: 0,  //0 is starting at left, use it to give left-margin
  right:0,  //0 is ending at right, use it to give right-margin
  child: Container(
    child:TextField()
  )
)

In this way, you can solve the "An InputDecorator, which is typically created by a TextField, cannot have an unbounded width" Error on Flutter.