如何解決顫振中小部件的溢出問題？

Question

我有一個問題的圖像溢出了 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})"),
        ],
      ),   
  );

Answer 1

換行由文本行和寬度減小的行代替希望這會有所幫助。 如果發生問題，請通知我。

          new Container(
              padding: EdgeInsets.only(left:10.0),
                decoration: BoxDecoration(

                    borderRadius: BorderRadius.all(Radius.circular(5.0)),
                    border: Border.all(color: Colors.blue)
                ),
                child: Row(
                  children: <Widget>[
                    Container(

                      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;
                            });
                          },
                        ),
                      width: MediaQuery.of(context).size.width/2-30.0,
                    ),
                    Container(
                      width: MediaQuery.of(context).size.width/2-30.0,
                      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);

                            },

                        ),
                    ),

                  ],
                )
            )

換行由文本行和寬度減小的行代替希望這會有所幫助。 如果發生問題，請通知我。

Answer 2

只需刪除 CountryPickerDropdown 小部件上方的 Expanded 小部件

如果我們在兩個孩子上都設置了 Expanded 小部件，則兩者都將嘗試采用最大寬度。 因此，如果我們僅在 textfield 上設置擴展小部件，則 textfield 將占用屏幕的剩余寬度。 下面是帶有小設備屏幕截圖輸出的工作代碼片段。

Container(
      width: MediaQuery.of(context).size.width,
      padding: const EdgeInsets.only(left: 10.0),
      decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(5.0)),
          border: Border.all(color: Colors.blue)),
      child: Row(
        children: <Widget>[
          CountryPickerDropdown(
            initialValue: 'in',
            itemBuilder: _buildDropdownItem,
            onValuePicked: (Country country) {
              print("${country.name}");
              print("${country.phoneCode}");
              print("${country.isoCode}");
              print("+${country.phoneCode}(${country.isoCode})");
            },
          ),
          Expanded(
            child: TextField(
              keyboardType: TextInputType.phone,
              decoration: const InputDecoration(
                border: InputBorder.none,
                hintText: "Telephone Number 14655656556",
              ),
              onChanged: (value) {},
            ),
          )
        ],
      )),
  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: const Icon(Icons.add),
  ), // This trailing comma makes auto-formatting nicer for build methods.
);

Answer 3

懷疑您的countryselector小部件需要擴展子級，並且文本溢出。

 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
            ),)
        ],

  );

Answer 4

嘗試使用此方法...。（在文本字段中，您可以添加電話號碼，在橙色和青色的Flex中，您可以添加國家/地區選擇器）

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            resizeToAvoidBottomPadding: false,
            body: SafeArea(
                child: Center(
                    child: Column(children: [
              Expanded(
                  flex: 25,
                  child: Column(children: [
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: Colors.red,
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: Column(
                        children: [
                          Expanded(
                            flex: 1,
                            child: Container(
                              color: Colors.blue,
                            ),
                          ),
                          Expanded(
                              flex: 1,
                              child: Row(
                                children: [
                                  Expanded(
                                      flex: 1,
                                      child: Row(
                                        children: [
                                          Expanded(
                                            flex: 1,
                                            child: Container(
                                              color: Colors.orange,
                                            ),
                                          ),
                                          Expanded(
                                            flex: 1,
                                            child: Container(
                                              color: Colors.cyan,
                                            ),
                                          ),
                                        ],
                                      )),
                                  Expanded(
                                    flex: 1,
                                    child: TextField(
                                      style: TextStyle(color: Colors.black),
                                    ),
                                  ),
                                ],
                              )),
                          Expanded(
                            flex: 1,
                            child: Container(
                              color: Colors.blue,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: Colors.pink,
                      ),
                    )
                  ])),
              Expanded(
                flex: 3,
                child: Container(
                  color: Colors.blue,
                ),
              )
            ])))));
  }
}

Answer 5

Expanded(
                          flex:1  
                          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(
                          flex:2
                          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);

                          },

                        ),)