如何使用 MediaQuery 计算高度和宽度？

Question

Suppose I have a container with height 60. How this 60 can be written in mediaquery?

example code:

Container(height:60,)

I want this container looks like having 60 as height but in responsive way.

Answer 1

Size size = MediaQuert.of(context).size

Container(
   //width: size.width * 0.1 //10% width of Device
   height: size.height * 0.1 //10% height of Device
),

Answer 2

You can Try this:

var size = MediaQuery.of(context).size;

Container(height:size.height * 60/580,);

here 60 is the height you prefer and 580 is the height of your device in ui design.

Answer 3

this will help var size = MediaQuery.of(context).size.height ;

and also some plugins there which can help Pubdev Plugins

Answer 4

You can use like this

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;
    return Container(
      height: height*0.6,
      width: width*0.5,
      child: ...,
    );
  }
}