Form widget is wider than its parent.

[kendalharland]

Create a widget with a Form descendant.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 500,
      child: MyForm(),
    );
  }
}

class MyForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Form(
      child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextFormField(
              decoration: const InputDecoration(
                labelText: 'label',
                hintText: 'hint',
              ),
            ),
          ]),
    );
  }
}

I expected that MyForm and MyForm > Form will be no wider than 500px. In reality both widgets expand to fill the width of the entire screen.

The only way I've found to limit the size of a form is by putting it in a Flex with other widgets, like Row or Column:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Now the form only takes up 1/3 of the screen width.
    return Row(children: [
      Expanded(child: Container()),
      Expanded(child: MyForm()),
      Expanded(child: Container()),
    ]);
  }
}

Why does this happen?

[jonahwilliams]

@kharland is MyWidget the root of your application (i.e. passed to runApp)?

[Hixie]

Form isn't a render object so it has no geometry. You should have the same problem if you just used Column in MyForm directly.

As far as I can tell this is working as intended.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.