Sizing elements to percentage of screen width height

Question

Is there a simple (non-LayoutBuilder) way to size an element relative to screen size (width/height)? For example: how do I set the width of a CardView to be 65% of the screen width.

It can't be done inside the build method (obviously) so it would have to be deferred until post build. Is there a preferred place to put logic like this?

Answer 1

Yes, you can size an element relative to screen size without using LayoutBuilder. You can use the MediaQuery class in Flutter to get the size of the screen and then use it to calculate the desired size.

Here's an example of how to set the width of a Card widget to be 65% of the screen width:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final cardWidth = screenWidth * 0.65; // 65% of screen width

    return Scaffold(
      body: Center(
        child: Card(
          child: Container(
            width: cardWidth,
            height: 200,
            child: Text('Hello World'),
          ),
        ),
      ),
    );
  }
}

In the above code, we first get the screen width using MediaQuery.of(context).size.width. Then we calculate the desired width of the Card widget as a percentage of the screen width by multiplying the screen width by 0.65 (i.e., 65%). Finally, we set the width of the Container widget inside the Card to the calculated value.

As for where to put this logic, it depends on your specific use case. You can put this logic inside the build method if you only need to calculate the size once. However, if you need to recalculate the size every time the screen is resized or the orientation changes, you may want to use a StatefulWidget and calculate the size inside the build method of the widget's state.