Reputation: 4545

How to resolve overflow with widget in flutter?

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

Upvotes: 8

Answers (5)

Prajeet Naga

Reputation: 233

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

Upvotes: 2

Aneesh Jose

Reputation: 385

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.

Upvotes: 1

Shagun Jain

Reputation: 171

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

Upvotes: 1

Hardik Kumbhani

Reputation: 2021

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

                          },

                        ),)

Upvotes: -1

Marius Schmack

Reputation: 171

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

  );

Upvotes: 4

How to resolve overflow with widget in flutter?

Answers (5)

Related Questions