flutterdartwidgetoverflowflutter-renderflex-error

Error or Incompatibility in Different Device Sizes in flutter


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?

enter image description here

The text being cut off:

enter image description here

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

Solution

  • 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().