ABSTRACT
This chapter focuses on building layouts for responsive Flutter applications. The responsive layouts can adapt themselves depending upon the space available for rendering their widgets. This chapter will cover FittedBox
, Expanded
, Flexible
, FractionallySizedBox
, LayoutBuilder
, and Wrap
widgets. Some of the widgets like FittedBox
position and scales their child while Expanded
and Flexible
widgets let their child expand to fill the available space. The FractionallySizedBox
widget adjusts its size to a fraction of the total available space. The LayoutBuilder
widget builds a widget tree based on its parent's widget size. The Wrap
widget gives the flexibility to render its children in vertical or horizontal runs. When direction of laying out the widgets is horizontal or vertical, then it's recommended to use Row
or Column
widgets respectively. If main axis for laying out widgets is not available, it makes sense to use the Flex
widget. When there laying out single child in then using Center
or Align
to position the child is a better choice. Some general guidelines to build responsive layouts are mentioned in this chapter as well.