How to resolve overflow with widget in flutter? - 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})"),
],
),
);

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

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