As I stated in the code, I give the widget sizes with MediaQuery, but despite this, there are incompatibilities like the images on different devices or I get an Overflow error. What is the solution to this? How should I size my widgets and things like buttons and images inside?
The text being cut off:
Padding(
padding: const EdgeInsets.only(top: 20.0, right: 30),
child: Container(
height: MediaQuery.of(context).size.height * 0.02,
width: MediaQuery.of(context).size.width * 0.23,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
primary: back_color,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
),
child: const Text(
'Discover',
style: TextStyle(fontSize: 15, color: Colors.black),
),
),
),
),
To avoid the text from being cut off, you can wrap FittedBox()
on your Text()
widget:
Padding(
padding: const EdgeInsets.only(top: 20.0, right: 30),
child: Container(
height: MediaQuery.of(context).size.height * 0.02,
width: MediaQuery.of(context).size.width * 0.23,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
),
child: FittedBox(
fit: BoxFit.fitWidth,
child: const Text(
'Discover',
style: TextStyle(fontSize: 15, color: Colors.black),
),
),
),
));
Here is a YouTube video from the Google team on FittedBox()
.