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.