How can I have widget sizes relative to the screen size in flutter?

Question

I was building a flutter app. In there I made a SliverAppBar:

child: NestedScrollView (
  headerSliverBuilder: (BuildContext context, i) {
    return <Widget> [
      SliverAppBar (
        backgroundColor: Colors.black,
        expandedHeight: 150.0,
      )
    ];
  },

I made the height to 150.0 px. But I realized that this size will change in different devices. How can I make the size take up 40% of the screen in every device?

Solution

You can use the BuildContext context with a MediaQuery to find out the current devices screen size. For example:

    var width = MediaQuery.of(context).size.width  * 0.4; // set width to 40% of the screen width
    var height = MediaQuery.of(context).size.height  * 0.4; // set height to 40% of the screen height

Comments

[anmol.majhail]

Use Media Query to get screen size - docs.flutter.io/flutter/widgets/MediaQueryData/size.html