Flutter: An InputDecorator, which is typically created by a TextField, cannot have an unbounded width

I am trying to get rid of the error "An InputDecorator, which is typically created by a TextField, cannot have an unbounded width."

It is strange because the TextFormField Elements are already wrapped by Expanded. I am really struggling with flutter layouts. I find it not always logcial and the debug notes are also no big help 🙁

What else could I try?

Please find below my Widget:

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      return Stack(children: [
        const RouteList(),
        Padding(
          padding: const EdgeInsets.all(mainPadding),
          child: Form(
              key: _formKey,
              child: Column(
                children: [
                  Expanded(
                      child: TextFormField(
                    controller: _start,
                    decoration: InputDecoration(
                      prefixIcon: const Icon(Icons.start),
                      suffixIcon: _ClearButton(controller: _start),
                      labelText: 'Start',
                      helperText: 'Enter your start location',
                      filled: true,
                    ),
                    validator: (value) {
                      return _validateInpute(value!);
                    },
                  )),
                  divider,
                  Expanded(
                      child: TextFormField(
                    controller: _destination,
                    decoration: InputDecoration(
                      prefixIcon: const Icon(Icons.forest),
                      suffixIcon: _ClearButton(controller: _destination),
                      labelText: 'Destination',
                      helperText: 'Enter your destination',
                      filled: true,
                    ),
                    validator: (value) {
                      return (value == null || value.isEmpty)
                          ? 'Mandatory field'
                          : null;
                    },
                  )),
                  divider,
                  ElevatedButton(
                    onPressed: () {
                      _submitForm(context);
                    },
                    child: const Text('Submit'),
                  ),
                ],
              )),
        )
      ]);
    });
  }

>Solution :

you should follow the best practice mean wrap you whole content in a container or sizedbox with defined width,
to use dynamic width you can use

MediaQuery.of(context).size.width - (padding * 2);

for example for your case you can achive this soimething like this

@override
Widget build(BuildContext context) {
  final double mainPadding = 16.0;
  final double containerWidth = MediaQuery.of(context).size.width - (mainPadding * 2);

  return LayoutBuilder(
    builder: (context, constraints) {
      return Stack(
        children: [
          const RouteList(),
          Padding(
            padding: EdgeInsets.all(mainPadding),
            child: Form(
              key: _formKey,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    width: containerWidth,
                    child: TextFormField(
                      controller: _start,
                      decoration: InputDecoration(
                        prefixIcon: const Icon(Icons.start),
                        suffixIcon: _ClearButton(controller: _start),
                        labelText: 'Start',
                        helperText: 'Enter your start location',
                        filled: true,
                      ),
                      validator: (value) {
                        return _validateInpute(value!);
                      },
                    ),
                  ),
                  const SizedBox(height: 16),
                  Container(
                    width: containerWidth,
                    child: TextFormField(
                      controller: _destination,
                      decoration: InputDecoration(
                        prefixIcon: const Icon(Icons.forest),
                        suffixIcon: _ClearButton(controller: _destination),
                        labelText: 'Destination',
                        helperText: 'Enter your destination',
                        filled: true,
                      ),
                      validator: (value) {
                        return (value == null || value.isEmpty)
                            ? 'Mandatory field'
                            : null;
                      },
                    ),
                  ),
                  const SizedBox(height: 16),
                  ElevatedButton(
                    onPressed: () {
                      _submitForm(context);
                    },
                    child: const Text('Submit'),
                  ),
                ],
              ),
            ),
          ),
        ],
      );
    },
  );
}

it will also help to handle ScrollViews and much more widgets
hope it will community