Responsive Layouts in Flutter
What is Responsive Layout Designs?
Responsive Layout design is a method of creating designs that can be seen on a variety of platforms, screen size and orientations.
In this article, we will discuss about different widgets which helps to design responsive layouts in Flutter and improve the user experience.
List of Widgets
- Wrap
- OverflowBar
- Intrinsic Width
- Intrinsic Height
- Spacer
- FittedBox
Wrap
Normally, we use Row/Column to align widgets in horizontal/vertical manners but sometimes width/height of widgets doesn’t meet the screen size and show the overflow exception so at that moment Wrap helps us to adjust the list of widgets horizontally/vertically on any device size.
Let’s overview the code implementation of Wrap widget to avoid the overflow exceptions.
It has some properties which helps us to modify direction, main-axis & cross-axis alignments and spacing.
In Wrap widget, runSpacing & runAlignment indicates cross-axis Spacing & cross-axis alignment respectively whereas crossAxisAlignment itself represents the cross-axis alignment of all widgets with respect to each other.
OverflowBar
OverflowBar is also use to adjust list of widgets in different size screens. It works as a switcher like It switch the Row behavior into Column when widgets are overflowed in Row.
Take a look on implementation.
Spacer
Spacer provides us an empty adjustable space between widgets in Flexible containers like Row and Column.
FittedBox
FittedBox allows us to adjust content in specific size container. It resizes the content automatically according to the available size.
You just need to wrap your Text widget into FittedBox widget. Here is an example.
In FittedBox, you can fit your content in different ways using the BoxFit type.
Intrinsic Height
Intrinsic Height helps us to adjust the height of widgets relatively with respect to the large one and avoid the height of other widgets in Row.
Steps
- Wrap your Row into IntrinsicHeight widget
- Set the cross-axis alignment of Row to CrossAxisAlignment.stretch
Intrinsic Width
Intrinsic Width helps us to adjust the width of widgets relatively with respect to the large one and avoid the width of other widgets in Column.
Steps
- Wrap your Column into IntrinsicWidth widget
- Set the cross-axis alignment of Column to CrossAxisAlignment.stretch
Hope you will enjoyed this article. Don’t forget to give thumbs up.
Keep Reading!
