如何解决Flutter中的窗口小部件溢出？

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

怀疑您的countryselector小部件需要扩展子级并且文本溢出。

class Node:
    def __init__(self, x):
        self.val = x
        self.next = None


a = Node(5)
b = Node(6)
c = a
c.next = b #this line changed
while a is not None:
    print(a.val)
    a = a.next

Answer 3

尝试使用此方法...。（在文本字段中，您可以添加电话号码，在橙色和青色的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 4

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);

                          },

                        ),)