Выпадающий пользовательский интерфейс Flutter

#flutter #flutter-layout

#flutter #flutter-макет

Вопрос:

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

 return LoadingIndicatorPage(
  loading: _loading,
  child: Scaffold(
    key: _scaffoldKey,
    resizeToAvoidBottomPadding: false,
    body: Container(
      decoration: new BoxDecoration(
        color: Colors.brown,
        image: new DecorationImage(
          image: new ExactAssetImage("graphics/register_bg.png"),
          fit: BoxFit.cover,
        ),
      ),
      child: Center(
        child: Padding(
          padding: EdgeInsets.only(
              left: LEFTRIGHT_PADDING, right: LEFTRIGHT_PADDING),
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: AnimatedOpacity(
              opacity: _currentOpacity,
              duration: const Duration(seconds: 1),
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(top: 50),
                    child: Text(
                      AppLocalizations.of(context).registerTitle,
                      style: TextStyle(fontSize: 32),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 50.0),
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        AppLocalizations.of(context).registerNameHint,
                        style: TextStyle(color: brownishGrey),
                      ),
                    ),
                  ),
                  TextFieldInput(
                    inputType: TextInputType.text,
                    textEditingController: nameController,
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        AppLocalizations.of(context)
                            .registerPhoneNumberHint,
                        style: TextStyle(color: brownishGrey),
                      ),
                    ),
                  ),
                  TextFieldInput(
                    inputType: TextInputType.text,
                    textEditingController: phoneNumberController,
                  ),


                  Padding(
                    padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'Country',
                        style: TextStyle(color: brownishGrey),
                      ),
                    ),
                  ),




                  Container(
                    padding: const EdgeInsets.only(left: 10.0, right: 10.0),
                    decoration: new BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.white,
                      boxShadow: [new BoxShadow(
                        color: shadow,
                        blurRadius: 4.0,
                        offset: Offset(1.0, 4.0),
                      )],
                      borderRadius: const BorderRadius.all(
                          const Radius.circular(5.0)
                      ),
                    ),
                    child: DropdownButtonHideUnderline(
                      child: ButtonTheme(
                        alignedDropdown: true,
                        child: DropdownButton<String>(
                          value: _selectedItem,
                          style: TextStyle(
                            color: Colors.black54,
                            fontSize: 16,
                          ),
                          hint: Text('Select Country'),
                          onChanged: (String newValue) {
                            setState(() {
                              _selectedItem = newValue;
                              print(_selectedItem);
                            });
                          },
                          items: countryList?.map((item) {
                            return new DropdownMenuItem(
                              child: new Text(item.name),
                              value: item.id.toString(),
                            );
                          })?.toList() ??
                              [],
                        ),
                      ),
                    ),

                  ),





                  Padding(
                    padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        AppLocalizations.of(context).registerEmailHint,
                        style: TextStyle(color: brownishGrey),
                      ),
                    ),
                  ),
                  TextFieldInput(
                    inputType: TextInputType.text,
                    textEditingController: emailController,
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        AppLocalizations.of(context).registerPasswordHint,
                        style: TextStyle(color: brownishGrey),
                      ),
                    ),
                  ),

                  TextFieldInput(
                    inputType: TextInputType.text,
                    textEditingController: passwordController,
                    obscureText: true,
                  ),

                  Padding(
                    padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        AppLocalizations.of(context)
                            .registerRepeatPasswordHint,
                        style: TextStyle(color: brownishGrey),
                      ),
                    ),
                  ),
                  TextFieldInput(
                    inputType: TextInputType.text,
                    textEditingController: repeatPasswordController,
                    obscureText: true,
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 80.0),
                    child: Button(
                        text: AppLocalizations.of(context).registerRegister,
                        buttonOnPressed: _createAccount),
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(8.0, 15.0, 8.0, 0),
                    child: Divider(
                      thickness: 1,
                      color: whiteTwo,
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 15.0, bottom: 30),
                    child: GestureDetector(
                      child: RichText(
                        text: TextSpan(
                          text:
                              AppLocalizations.of(context).registerLoginPre,
                          style: TextStyle(color: brownishGrey),
                          children: <TextSpan>[
                            TextSpan(
                              text: AppLocalizations.of(context)
                                  .registerLoginPost,
                              style: TextStyle(color: purpleishBlueThree),
                            ),
                          ],
                        ),
                      ),
                      onTap: () {
                        Navigator.pop(context);
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  ),
);
  

ПРОБЛЕМА: во время компоновки было выдано следующее утверждение:
Изображение справа переполнено на 154 пикселя.

Соответствующий виджет, вызывающий ошибку, был: DropDownButton

Рассмотрите возможность применения коэффициента гибкости (например, с использованием расширенного виджета), чтобы заставить дочерние элементы RenderFlex помещаться в пределах доступного пространства вместо того, чтобы иметь их естественный размер. Это считается состоянием ошибки, поскольку указывает на то, что есть содержимое, которое невозможно увидеть. Если содержимое законно больше, чем доступное пространство, подумайте о том, чтобы обрезать его виджетом clipRect, прежде чем помещать его во гибкий файл, или используйте контейнер с возможностью прокрутки, а не гибкий файл, например ListView.

введите описание изображения здесь

Ответ №1:

Обычно происходит то, что всякий раз, когда дочерний элемент хочет получить визуализацию, он просит своих родителей указать высоту и ширину. Теперь ширина контейнера ограничена из-за заполнения с обеих сторон, поэтому дочерний элемент переполняется

Теперь, что вы можете сказать дочернему элементу, так это быть гибким, поэтому оберните дочерний элемент контейнера Flexible(), виджетом

вот так

 Container(
                    padding: const EdgeInsets.only(left: 10.0, right: 10.0),
                    decoration: new BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.white,
                      boxShadow: [new BoxShadow(
                        color: shadow,
                        blurRadius: 4.0,
                        offset: Offset(1.0, 4.0),
                      )],
                      borderRadius: const BorderRadius.all(
                          const Radius.circular(5.0)
                      ),
                    ),
                    child: Flexible(
                       child:DropdownButtonHideUnderline(
                      child: ButtonTheme(
                        alignedDropdown: true,
                        child: ... //your other code 
                        ),
                
  

Комментарии:

1. Я попробую, спасибо, что поделились некоторой информацией.