Fraction of Screen Width and Height

These properties can make your app responsive and adaptable to different devices. To create a responsive or adaptive layout, you often need to know the screen width or height to adjust the size, position, layout, and configuration of widgets based on the screen size.

Example

Configure GridView items based on screen size

Let's say you have a grid of products. On larger screens, like tablets, you want to display seven products in a row. On regular phone screens, you want to display three products in a row. You can calculate the number of products to display in a row based on the screen width. Here's how it looks:

See how the number of images in a row increases on a tablet view

The idea is to use the Conditional Value and compare the "Screen Width" with the 'Breakpoint Medium." If the screen width is less than the medium breakpoint, display three images in a row; if not, display seven images in a row (i.e., for a larger screen).

Here is exactly how you do it:

1. Add the GridView widget and head over to the Properties Panel > GridView Properties > Cross Axis Count.

2. Open the Set from Variable menu > Conditional Value.

3. For the IF condition, add the Single Condition,

   1. Set the First Value to Set from Variable menu > Global Properties > Fraction of Screen Width (keep the Entire Width enabled, i.e., 100%).

   2. Operator to Less Than.

   3. Set the Second Value to Set from Variable menu > Constants > Breakpoint Medium (i.e., Tablet devices).

4. Set the Then value to 3.

5. Set the Else value to 7.

Configure GridView based on the screen size