Error or Incompatibility in Different Device Sizes in flutter

Question

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

Answer 1

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