CODEWITHSUNDEEP
user-interfacedartflutterfrontend
Young
Young

Reputation: 1091

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 (
        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?

Upvotes: 5

Views: 5209

Answers (1)

Oswin Noetzelmann
Oswin Noetzelmann

Reputation: 9555

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

Upvotes: 3

Related Questions