Sizing elements to percentage of screen width height

0 votes

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?

Mar 23, 2023 in Flutter by Ashwini
• 5,430 points
1,065 views

1 answer to this question.

0 votes

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.

answered Mar 24, 2023 by vishalini

Related Questions In Flutter

0 votes
1 answer

How to make flutter app responsive according to different screen size?

To make your Flutter app responsive according ...READ MORE

answered Mar 27, 2023 in Flutter by anonymous
6,181 views
0 votes
1 answer

How to find the path of Flutter SDK?

To locate the Flutter SDK, you can ...READ MORE

answered Mar 27, 2023 in Flutter by anonymous
21,459 views
0 votes
1 answer

How to get build and version number of Flutter app?

You can get the build and version ...READ MORE

answered Mar 29, 2023 in Flutter by pooja
801 views
0 votes
1 answer

How to add a ListView to a Column in Flutter?

To add a ListView to a Column ...READ MORE

answered Mar 9, 2023 in Android by pooja
9,099 views
0 votes
1 answer

How to deal with unwanted widget build?

There are a few strategies that you ...READ MORE

answered Mar 10, 2023 in Android by vinayak
2,484 views
0 votes
1 answer

Dart_LoadScriptFromKernel: The binary program does not contain 'main'.

Hi@akhtar, You need to add the main() function ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
3,218 views
0 votes
1 answer

How to install Dart in Windows system?

Hi@akhtar, Dart is the programming language used to code Flutter apps. ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
786 views
0 votes
1 answer

How to Determine Screen Height and Width?

To optimize your Flutter application for different ...READ MORE

answered Mar 21, 2023 in Flutter by tan
623 views
0 votes
1 answer

How to Deserialize a list of objects from json in flutter Ask Question?

To deserialize a list of objects from ...READ MORE

answered Mar 28, 2023 in Flutter by vishalini
1,592 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP