What is Flutter?

Flutter is a framework from Google which helps us to design cross-platform applications with a single codebase. Flutter provides a rich set of pre-designed widgets and a flexible framework to create visually appealing and responsive user interfaces. Flutter has a faster development phase since everything in Flutter is widgets.

‍

Flutter for Web:

Flutter for the web was first released as a technical preview on February 28, 2019. On March 3, 2021, Flutter for the Web reached its stable release with Flutter version 2.0. Since then Flutter team has been working on improving the performance for web development in Flutter.

‍

Why do we need a LayoutBuilder?

Often while building web applications we have to design our user interface respective of different device layouts. In a Framework which promotes a single codebase for cross-platform applications, how can we achieve respectiveness across different device layouts? Flutter provides us with a special builder called LayoutBuilder. Widgets that are enclosed with this builder are rebuilt when the width & height of the viewport of the device change. It provides a way to build widgets that dynamically adapt their layout based on the available space given by the parent widget.

LayoutBuilder gives us a special property called BoxConstraints using the BuildContext of the parent. The BoxConstraints has many useful properties such as minHeight, maxHeight, minWidth, maxWidth etc. Which can be used to build responsive and adaptive layout for our applications.

‍

LayoutBuilder in action:

Now, let’s build an application that has a list of cards that appears as a Column in the Mobile width and as a Row in all other viewport width.

‍

In the above code we have used the Flex widget which is a layout widget and using the max width of the viewport we are changing the direction of the children widgets of our Flex widget. Whenever the view port width/height changes the callback function of our layout builder gets called and the widgets are rebuilt every time. Absorb the below image for clear understanding.

‍

‍

‍

‍

‍

‍

I have provided a minimal example for understanding the purpose of the LayoutBuilder. Using LayoutBuilder sparingly and only when necessary to achieve custom layout behavior over usage of the LayoutBuilder might also lead to performance issues. By using LayoutBuilder thoughtfully and understanding its impact on your app’s performance and layout, you can leverage its capabilities effectively and avoid potential issues.

Another approach to achieve responsive design is by utilizing the “responsive_framework” package. This package offers a convenient way to implement responsiveness in your app. By wrapping your entire app with a builder provided by the package, you can eliminate repetitive code and access useful properties such as “isMobile” and “isDesktop” to adapt your layout accordingly. Let’s discuss the purpose and benefits of this package in a separate article.

‍

‍