Adaptive Layout Design in FlutterFlow for the different screen sizes of a specific form factor

Introduction

In recent weeks I ventured into the world of no-code and low-code development. If you ask me, I’d say there are some pretty impressive tools out there, including Bubble and Flutterflow. I was particularly digging into FlutterFlow while using it to build some client products. FlutterFlow is a rather versatile tool that is being improved daily because that’s how fast they roll out updates.

Today though I will be talking about UI building in FlutterFlow on specific form factors. So FlutterFlow allows you to build for three form factors which is the mobile, tablet and desktop/laptop but each form factor laptops for instance come in different sizes some being bigger than others and your designs need to be able to adapt and remain consistent on all the laptop sizes.

The Layout

Therefore for context, we will be talking about the laptop form factor. When starting a design FlutterFlow allows you to choose a screen size which is more or less an aspect ratio at the top of the page. The first thing that you would do would be to select the screen size (resolution) 1920 by 1080 (width to height) which translates to the 16:9 aspect ratio that is preferred by 77% of computer users according to a post on wikipedia. This implies that you would be designing for by far the majority of users.

After this, it is always a good idea to begin every component (a group of widgets within a confined space i.e. text, buttons, sections, pages) of your design with a container widget this is because the container enables a high level of customizability and it is the best widget to determine the length and width of sections, rows, columns and widgets within your UI. So to start your design clear out any default widgets and add a container as the first widget on the widget tree. Set this container to occupy 100% width and length. The dimensions of widgets can either be set in pixels or percentages, in certain use cases pixels may be better but generally working with percentages provides more dynamic control of the dimensions.

Setting the dimensions to 100% means that that widget will occupy 100% of the screen available therefore taking away the need to do exhausting calculations about the pixels each widget occupies on the screen. You can follow this container with a row or a column depending on your layout. Rows and columns are the most basic layout widgets and do exactly what you think they do arranging items horizontally or vertically. They do not take any dimensions of their own but occupy the space of the widget in which they are placed depending on certain constraints that you set for them which is an entirely different topic for discussion.

Consider we have a row containing two sections that are adjacent to one another. First of all, we need to fix the height of the row by wrapping it in a container and setting the container’s height to 20% for instance and its width to 100% so that the row can occupy the entire run along the width. Within the row add to containers and set their dimensions to 100% each because they are constrained by the height of the row. Next, we have to provide them with an expansion setting “Expanded” in this case which makes the widget fill the available space in its parent widget and give it a flex value which works like the weight of that widget within the main axis of the parent widget. So the flex value is more like a ratio like in the image below, I gave the yellow container a flex value of 2 and the teal one a default value of 1.

The next step would be to take care of the spacing, now it’s not good practice to have a bunch of padding values on every widget. Generally, when applying paddings it is best to everything at the topmost level i.e. starting with the parent elements in this case the parent element would be the row. The row provides functionalities that allow for the spacing of its children as well as start and end spacing. At the bottom of the row properties section, you can set this value. The value is generally in pixels, there’s an option to apply different values to start and end by switching the toggle off.

Conclusion

Ultimately, the success of UI building in FlutterFlow for laptops lies in the ability to balance precision and adaptability, creating interfaces that not only meet the preferences of the majority but also seamlessly adjust to the diverse array of laptop screen sizes. This strategic approach enhances user experiences and positions FlutterFlow as a dynamic tool for responsive design in the ever-expanding landscape of digital platforms, happy building FlutterFlow devs 💯 ✌ ️.

Edwin Madanji

Writer & Blogger

Follow us on;

We give quality services
OUR SERVICES
Mobile App Development
Website Design and Development
Social Media Marketing
Content Creation
AI and Marketing Analytics
Document Revision and Translation
Reach out
Our Offices

Kampala, KIbuli, Uganda

follow us on;

© Copyright 2024 @artsyafricaremotesquad