how to use calculate height and width using MediaQuery?-CodePudding

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.

CodePudding user response：

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

and also some plugins there which can help Pubdev Plugins

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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: ...,
    );
  }
}