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



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

child: NestedScrollView (
  headerSliverBuilder: (BuildContext context, i) {
    return <Widget> [
      SliverAppBar (
        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?


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

Answered By – Oswin Noetzelmann

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More