Overflow issue in some iOS and android devices - flutter

Question

i have implement radio buttons in one row and tested the ui some devices. In small devices like iphone 5s i got the overflow error.
Widget priority() {
return Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: const Text('Priority:'),
),
Row(
children: <Widget>[
radioButton('High', 0),
radioButton('Medium', 1),
radioButton('Low', 2),
],
)
],
);
}
Widget radioButton(String text, int value) {
return Row(
children: <Widget>[
Radio<int>(
activeColor: pinkColor,
value: value,
groupValue: _selected,
onChanged: (int value) {
onChange(value);
}),
Text(text, style: TextStyle(fontSize: 15)),
],
);
}

Answer 1

Hey, Use Expanded Widget To Solve Overflow Issue And For IOS, Android Issue Wrap Whole Widget In SafeArea, Hope This May Help You...

Answer 2

Add SingleChildScrollView it'll work.
Widget priority() {
return Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: const Text('Priority:'),
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
radioButton('High', 0),
radioButton('Medium', 1),
radioButton('Low', 2),
],
))
],
);
}

Answer 3

Widget priority() {
return Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: const Text('Priority:'),
),
Wrap(
direction: Axis.horizontal,
children: <Widget>[
radioButton('High', 0),
radioButton('Medium', 1),
radioButton('Low', 2),
],
)
],
);
}
Widget radioButton(String text, int value) {
return Row(
children: <Widget>[
Radio<int>(
activeColor: pinkColor,
value: value,
groupValue: _selected,
onChanged: (int value) {
onChange(value);
}),
Text(text, style: TextStyle(fontSize: 15)),
],
);
}
Replaced Row with Wrap. If Overflow occurs, the overflowing widget will be aligned in the next line. Hope it helps.

Answer 4

Solution Code:
Widget priority() {
return Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: const Text('Priority:'),
),
Row(
children: <Widget>[
Expanded(child: radioButton('High', 0),),
Expanded(child: radioButton('Medium', 1),),
Expanded(child: radioButton('Low', 2),),,
],
)
],
);
}
Widget radioButton(String text, int value) {
return Row(
children: <Widget>[
Radio<int>(
activeColor: pinkColor,
value: value,
groupValue: _selected,
onChanged: (int value) {
onChange(value);
}),
Text(text, style: TextStyle(fontSize: 15)),
],
);
}
The reason why you faced it in a some devices and not in the others was that all devices have different screen sizes.
Expanded Widget ensures that it's child widget covers all the available space while it's among other widgets in a List of Widgets ([])
When we use it on multiple widgets then it equally divides the space among each other. You can control the size taken by each widget using the flex property.
If you introduce a non-Expanded widgets between Expanded widgets then the non-Expanded once are first laid out before the Expanded widget(s).
(Atleast that's what mentioned in Flutter's Widget of the Week video. However, I think it has got something more complex to it which we don't need to know.)
Tip: Avoid using functions in these places...Use classes instead.
A beautiful tutorial by the official Flutter Team:
https://flutter.dev/docs/development/ui/interactive