Search code examples
flutteruser-interfacemedia-queries

How to solve UI having different sizes? Mediaquery doesn't solve text UI

Been using mediaquery all along to size for different screens.

Let's take for an example, a card with text within. Started testing on different phone sizes only to realize that the card changes size but the text doesn't. So it looks weird on bigger phones - lots of empty spaces.

is there a way to make text size responsive?

Failing that I would see that making card size an absolute size on all phones as a possible solution? But that would also result in more weird empty spaces all around.

Does anyone have a better solution? Relative size, responsive to phone size is definitely the best! Thanks!

Solution

  • You can also use MediaQuery for the fontSize in the TextStyle like below:

    Text(
  'Ladies and gentlemen, you could have been anywhere in the world tonight, but you’re here with us in New York City.',
  style: TextStyle(fontSize: MediaQuery.of(context).size.height * 0.1),
)