Dynamically resizing images using MediaQuery in Flutter

Question

I have two pictures of different dimensions meant to be rendered as per the screen size of the phone the app is being run on which I suppose is something that can be achieved using MediaQuery in the following way:

if(MediaQuery.of(context).size.height < initialSize) {
  return Image.asset('Image meant for smaller screens')
} else {
  return Image.asset('Image meant for bigger screens')
}

What I don't understand is what initialSize value I should be putting in to check and resize accordingly? Hope I have been able to make my question clear!

Answer 1

initialSize differentiate the small image and large image screen based on screen height.

Let say if device's height is less than 200px we want to show X image, else show Y image.

  Image getImage() {
    if (MediaQuery.of(context).size.height < 200) {
      return Image.asset('Image meant for smaller screens');
    } else {
      return Image.asset('Image meant for bigger screens');
    }
  }

You need to choose how you like to define small and large screen image, like here 200, initialSize.