时间戳

首页 > 解决方案 > 如何解决flutter中小部件的溢出问题？

flutter - 如何解决flutter中小部件的溢出问题？

问题描述

我有一张溢出 17 像素的问题图像。&我无法解决？首先，我做了什么..!!!

我拿了一个Row()小部件并用Container()&包裹Row()了两个Expanded()小部件。一个是为了 TextField()，另一个是为了CountryPickerDropdown()。

在此处输入图像描述

我用过country_pickers插件

代码：

 new Container(
                          width: MediaQuery.of(context).size.width,
                          padding: const EdgeInsets.only(left: 10.0),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(5.0)),
                          border: Border.all(color: Colors.blue)
                        ),  
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              child: CountryPickerDropdown(
                                initialValue: 'in',

                                itemBuilder: _buildDropdownItem,
                                onValuePicked: (Country country) {

                                  isCountryCodeSelected=true;
                                  print("${country.name}");
                                  print("${country.phoneCode}");
                                  print("${country.isoCode}");
                                  print("+${country.phoneCode}(${country.isoCode})");
                                 setState(() {
                                  countryCode= country.phoneCode;
                                });
                                },
                              ),
                            ),
                            Expanded(
                              child: TextField(
                              keyboardType: TextInputType.phone,
                              decoration: InputDecoration(
                                border: InputBorder.none, 
                                hintText: "Telephone Number", 
                              ),

                              onChanged: (value){

                               setState(() {
                                 phoneValue=value; 
                               });

                                print("phoneNumbe:$phoneNo");
                                this.phoneNo = isCountryCodeSelected ? "+" + countryCode + value : "+91" + value ;
                                print("phoneNo="+phoneNo);

                              },

                            ),
                            )
                          ],
                        )
                      ),

Contry 代码及其国旗图像的小部件：

 Widget _buildDropdownItem(Country country) => Container(
    child: Row(
        children: <Widget>[
          CountryPickerUtils.getDefaultFlagImage(country),
          SizedBox(
            width: 8.0,
          ),
          Text("+${country.phoneCode}(${country.isoCode})"),
        ],
      ),   
  );

标签： flutterdartoverflowflutter-layout

解决方案

怀疑您的国家/地区选择器小部件需要扩展子级和文本溢出。

 Widget _buildDropdownItem(Country country) =>  Row(
        children: <Widget>[
            Expanded(child: Container(
             margin: EdgeInsets.only(right: 8),
             child: CountryPickerUtils.getDefaultFlagImage(country)),),
            Expanded(child: Text(
              "+${country.phoneCode}(${country.isoCode})",
                overflow: Overflow.Eclipse
            ),)
        ],

  );

推荐阅读