Адаптивный макет для Flutter web. Как установить правильную высоту?

Question

Меня совершенно смущает адаптивный макет для Flutter web. Попытка создать простую форму со столбцами, строками и текстовыми полями. Я оборачиваю все поля столбца в Expanded, но если я уменьшу размер браузера, я получу вот такое изображение:

Если я установлю Container (height: некоторое значение ) вместо расширенного я получаю нижнее переполнение.

Пример контейнера (высота: некоторое значение)

return Container(
          margin: EdgeInsets.all(22),
          child: Card(
              child: Container(
                margin: EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text("Inspection",
                          style: Theme.of(context).textTheme.headline5),
                      Padding(
                        padding: EdgeInsets.all(8),
                      ),
                      Expanded(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Expanded(
                              child: Column(
                                children: <Widget>[
                                  Card(
                                      child: Container(height: 250,
                                        margin: EdgeInsets.all(16),
                                        child: Form( 
                                          key: formKey,
                                          child: Column(mainAxisSize: MainAxisSize.min,
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: <Widget>[
                                              Text("Inspection details",
                                                  style: Theme.of(context)
                                                      .textTheme
                                                      .headline6),

                                                 TextFormField(
                                                  controller: nameController,
                                                  decoration: InputDecoration(
                                                    labelText:
                                                        "Inspection Name",
                                                  ),
                                                  validator: (value) {
                                                    if (value.isEmpty) {
                                                      return 'Please enter Inspection name';
                                                    }
                                                    return null;
                                                  },
                                                ),

                                              Row(
                                                children: [

                                                          Text("Responsible:"),
                                                  Padding(
                                                    padding: EdgeInsets.all(8),
                                                  ),
                                                  Expanded(
                                                    child: ResponsibleSelector(
                                                      dropdownValue:
                                                          inspectionState
                                                              .inspection
                                                              .responsible,
                                                      selectionCallback: (value) =>
                                                          responsibleController
                                                              .text = value,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                               TextFormField(
                                                  onTap: () {
                                                    FocusScope.of(context)
                                                        .requestFocus(
                                                            new FocusNode());
                                                    _selectDate(context);
                                                  },
                                                  controller: dateController,
                                                  decoration: InputDecoration(
                                                    labelText:
                                                        "Inspection date",
                                                  ),
                                                ),

                                            ],
                                          ),
                                        ),
                                      ),
                                    ),

                                  Padding(
                                    padding: EdgeInsets.all(8),
                                  ),
                                 Card(
                                        child: Container(height: 400,
                                            margin: EdgeInsets.all(16),
                                            child: Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.start,
                                                mainAxisSize: MainAxisSize.min,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: <Widget>[
                                                  Text("Client details",
                                                      style: Theme.of(context)
                                                          .textTheme
                                                          .headline6),
                                                  DropdownButton(
                                                    isExpanded: true,
                                                    value: _selectedClient,
                                                    items: _clientList,
                                                    onChanged:
                                                        onChangeDropdownItem,
                                                  ),

                                                  // Spacer(),
                                                  Expanded(
                                                    child: TextFormField(
                                                      maxLines: null,
                                                      minLines: null,
                                                      expands: true,
                                                      controller:
                                                          contactController,
                                                      decoration:
                                                          InputDecoration(
                                                        labelText:
                                                            "Contact person",
                                                      ),
                                                    ),
                                                  ),
                                                ]))),

                                ],
                              ),
                            ),

Пример развернутого:

return Container(
          margin: EdgeInsets.all(22),
          child: Card(
              child: Container(
                  height: MediaQuery.of(context).size.height,
                  margin: EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text("Inspection",
                          style: Theme.of(context).textTheme.headline5),
                      Padding(
                        padding: EdgeInsets.all(8),
                      ),
                      Expanded(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Expanded(
                              child: Column(
                                children: <Widget>[
                                  Expanded(
                                    child: Card(
                                      child: Container(
                                        margin: EdgeInsets.all(16),
                                        child: Form(
                                          key: formKey,
                                          child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: <Widget>[
                                              Text("Inspection details",
                                                  style: Theme.of(context)
                                                      .textTheme
                                                      .headline6),
                                              Expanded(
                                                child: TextFormField(
                                                  controller: nameController,
                                                  decoration: InputDecoration(
                                                    labelText:
                                                        "Inspection Name",
                                                  ),
                                                  validator: (value) {
                                                    if (value.isEmpty) {
                                                      return 'Please enter Inspection name';
                                                    }
                                                    return null;
                                                  },
                                                ),
                                              ),
                                              Expanded(
                                                  child: Row(
                                                children: [

                                                          Text("Responsible:"),
                                                  Padding(
                                                    padding: EdgeInsets.all(8),
                                                  ),
                                                  Expanded(
                                                    child: ResponsibleSelector(
                                                      dropdownValue:
                                                          inspectionState
                                                              .inspection
                                                              .responsible,
                                                      selectionCallback: (value) =>
                                                          responsibleController
                                                              .text = value,
                                                    ),
                                                  ),
                                                ],
                                              )

                                                  ),

                                              Expanded(
                                                child: TextFormField(
                                                  onTap: () {
                                                    FocusScope.of(context)
                                                        .requestFocus(
                                                            new FocusNode());
                                                    _selectDate(context);
                                                  },
                                                  controller: dateController,
                                                  decoration: InputDecoration(
                                                    labelText:
                                                        "Inspection date",
                                                  ),
                                                ),
                                              ),

                                            ],
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.all(8),
                                  ),
                                  Expanded(
                                    child: Card(
                                        child: Container(
                                            margin: EdgeInsets.all(16),
                                            child: Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.start,
                                                mainAxisSize: MainAxisSize.min,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: <Widget>[
                                                  Text("Client details",
                                                      style: Theme.of(context)
                                                          .textTheme
                                                          .headline6),
                                                  DropdownButton(
                                                    isExpanded: true,
                                                    value: _selectedClient,
                                                    items: _clientList,
                                                    onChanged:
                                                        onChangeDropdownItem,
                                                  ),


                                                  Expanded(
                                                    child: TextFormField(
                                                      maxLines: null,
                                                      minLines: null,
                                                      expands: true,
                                                      controller:
                                                          contactController,
                                                      decoration:
                                                          InputDecoration(
                                                        labelText:
                                                            "Contact person",
                                                      ),
                                                    ),
                                                  ),
                                                ]))),
                                  )
                                ],
                              ),
                            ),

Как получить правильный макет на флаттер-полотне?

Answer 1

Это зависит от того, как вы хотите расположить свое представление, есть несколько способов, но я считаю, что лучший способ сделать высоту фиксированной по размеру экрана, используя MediaQuery и SingleChildScrollView , поэтому, если размер экрана падает, пользователь может прокручивать.

Примечание: обычно добавляется к родительскому виджету

Для вас это будет выглядеть так:

return Container(
          margin: EdgeInsets.all(22),
          child: Card(
              child: Container(
                height: MediaQuery.of(context).size.height, //added dynamic height
                margin: EdgeInsets.all(16),
                  child: SingleChildScrollView( //added scrolling
                      child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text("Inspection",
                          style: Theme.of(context).textTheme.headline5),
                      Padding(
                        padding: EdgeInsets.all(8),
                      ),
                      Expanded(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,