Is it possible to make a layout auto adjust from Row layout to Column layout while changing windows-CodePudding

I am trying to create a flutter web App. I have created a Row with Form with 3 TextFormFields. My Requirement is: If i change the web page's window Size big to small, That TextFormFields should be viewed as Column Layout, And if i change the size from small to big that TextFormFields should be viewed as row layout. And someTimes i will use TextFormFields more than 3. If it is possible How to do. Or If any other Ideas aso Please let me know. Or Let me know incase any other widgets are there Rather than that row and column. My Example code with Row:

SingleChildScrollView(
                    child: Row(
                      children: [
                        Form(
                          key: _formkey,
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Card(
                              child: Padding(
                                padding: const EdgeInsets.all(16),
                                child: Row(
                                  children: [
                                    ConstrainedBox(
                                      constraints:
                                          const BoxConstraints(maxWidth: 400),
                                      child: TextFormField(
                                        readOnly: true,
                                        decoration: const InputDecoration(
                                          border: OutlineInputBorder(),
                                          filled: true,
                                          labelText: '1',
                                        ),
                                      ),
                                    ),
                                    const SizedBox(
                                      width: 10,
                                    ),
                                    ConstrainedBox(
                                      constraints:
                                          const BoxConstraints(maxWidth: 400),
                                      child: TextFormField(
                                        readOnly: true,
                                        decoration: const InputDecoration(
                                          border: OutlineInputBorder(),
                                          filled: true,
                                          labelText: '2',
                                        ),
                                      ),
                                    ),
                                    const SizedBox(
                                      width: 10,
                                    ),
                                    ConstrainedBox(
                                      constraints:
                                          const BoxConstraints(maxWidth: 400),
                                      child: TextFormField(
                                        readOnly: true,
                                        decoration: const InputDecoration(
                                          border: OutlineInputBorder(),
                                          filled: true,
                                          labelText: '3',
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),

CodePudding user response：

The widget you are probably looking for is the OverflowBar widget. It is used for example in dialogs for its buttons. In case there is not enough horizontal space then the buttons are laid out as a column instead of a row.

You can see its documentation here: https://api.flutter.dev/flutter/widgets/OverflowBar-class.html

CodePudding user response：

You can use MediaQuery to measure the height and width of device and according to that you can provide the height and width in percentage.