How to resolve overflow with widget in flutter?

Question

I have an image of an issue that is overflowing by 17 pixels. & I'm unable to resolve it? first of all, what I did..!!!

I took a Row()widget and wrapped with Container() & in that Row() took two Expanded() widget. one is for TextField() and another is for CountryPickerDropdown().

I have used country_pickers plugin

CODE:

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

                              },

                            ),
                            )
                          ],
                        )
                      ),

Widget for Contry code and their national Flag image:

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

I replaced it but nothing happend. The issue is still there as before, Overflowed by 17 pixels. — Shruti Ramnandan Sharma
– Shruti Ramnandan Sharma, Commented Sep 2, 2019 at 10:26
@AnkitGupta I tried but got exception and nothing is appearing on the screen. — Shruti Ramnandan Sharma
– Shruti Ramnandan Sharma, Commented Sep 2, 2019 at 13:30
@ShrutiRamnandanSharma Can you try taking 2 or 3 columns depending on the number of widgets you need to build the require UI inside the box. — Ankit Gupta
– Ankit Gupta, Commented Sep 19, 2019 at 7:03

Marius Schmack · Accepted Answer · 2019-09-02 10:54:36Z

4

Suspecting that your countryselector widget needs to have expanded childs and the text overflow.

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

  );

answered Sep 2, 2019 at 10:54

Marius Schmack

1711 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shruti Ramnandan Sharma Over a year ago

Eclipse isn't supporting. getting error The getter 'Eclipse' isn't defined for the class 'Overflow'. then which library I have to import?

Marius Schmack Over a year ago

You can use any of the overflow types except for none, I was typing this in the browser without auto completion.

samson matt Over a year ago

For word wrap, use TextOverflow.visible

Fawaz Ashraf Over a year ago

overflow: TextOverflow.ellipsis

Prajeet Naga · Accepted Answer · 2021-09-26 03:39:06Z

Just remove the Expanded widget above the CountryPickerDropdown widget

If we set Expanded widget on both the child, Both will try to take the max width. So if we just set expanded widget on textfield only, textfield will take the remaining width of the screen. Below is the working code snippet with output of screenshot of small device.

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

Shagun Jain · Accepted Answer · 2019-09-03 10:20:11Z

Try using this approach ....(In the text field you can add your phone no and in the orange and cyan color flex you can add your country picker)

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

I'm not getting you clearly. please code according to my code.

Aneesh Jose · Accepted Answer · 2019-09-04 11:19:35Z

1

The Wrap is replaced by Row and width of textfield reduced Hope this helps. Please let me know if something went wrong.

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

                            },

                        ),
                    ),

                  ],
                )
            )

The Wrap is replaced by Row and width of textfield reduced Hope this helps. Please let me know if something went wrong.

edited Sep 4, 2019 at 11:19

answered Sep 2, 2019 at 11:21

Aneesh Jose

3856 silver badges19 bronze badges

3 Comments

Shruti Ramnandan Sharma Over a year ago

stiil getting overlapping error and after changing with your answer my widgets are appearing in column form.

Aneesh Jose Over a year ago

Again edited by replacing Wrap with Row and resizing the TextField

Shruti Ramnandan Sharma Over a year ago

Hey, it works on only larger screen, not on small screens. I still getting the overflowing error. see on link [1]: i.sstatic.net/nkvEg.jpg

Hardik Kumbhani · Accepted Answer · 2019-09-02 10:56:40Z

-1

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

                          },

                        ),)

answered Sep 2, 2019 at 10:56

Hardik Kumbhani

2,01912 silver badges18 bronze badges

2 Comments

Shruti Ramnandan Sharma Over a year ago

it doesn't work, getting exception. and nothing appearing on screen, after changing with your answer.

Shruti Ramnandan Sharma Over a year ago

sorry, that Exception was not occurred by your answer. but still, your answer is not useful.

Collectives™ on Stack Overflow

How to resolve overflow with widget in flutter?

5 Answers 5

4 Comments

Comments

1 Comment

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related