Scribd
Upload
2 views

3 Introduction to Flutter Layouts

The document provides an introduction to Flutter layouts, emphasizing that everything in Flutter is a widget, and layout functionality is integrated into these widgets. It categorizes layout widgets into single child and multiple child widgets, detailing various examples such as Container, Row, and Column. The document highlights the importance of using these widgets effectively to create attractive and readable app UIs.

Uploaded by

shabana ansari
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

3 Introduction to Flutter Layouts

The document provides an introduction to Flutter layouts, emphasizing that everything in Flutter is a widget, and layout functionality is integrated into these widgets. It categorizes layout widgets into single child and multiple child widgets, detailing various examples such as Container, Row, and Column. The document highlights the importance of using these widgets effectively to create attractive and readable app UIs.

Uploaded by

shabana ansari
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Introduction to

Flutter Layouts
Introduction

• Core concept of Flutter is Everything is widget.


• Flutter incorporates a user interface layout
functionality into the widgets itself.
• Flutter provides quite a lot of specially designed
widgets like Container, Center, Align, etc., only for
the purpose of laying out the user interface.
• Widgets build by composing other widgets
normally use layout widgets.
Type of Layout Widgets

• We can categories the layout widget into


two types:

1.Single Child Widget

2.Multiple Child Widget


Single Child Widgets

• The single child layout widget is a type of widget,


which can have only one child widget inside
the parent layout widget.
• These widgets can also contain special layout
functionality.
• Flutter provides us many single child widgets to
make the app UI attractive.
• If we use these widgets appropriately, it can save
our time and makes the app code more readable.
Single Child Widgets
• Container: It is the most popular layout widget that provides customizable
options for painting, positioning, and sizing of widgets.
• Padding: It is a widget that is used to arrange its child widget by the given
padding.
• Center: This widget allows you to center the child widget within itself.
• Align: It is a widget, which aligns its child widget within itself and sizes it
based on the child's size.
• SizedBox: This widget allows you to give the specified size to the child
widget through all screens.
• ConstrainedBox: It is a widget that allows you to force the additional
constraints on its child widget.
Multiple Child Widgets

• The multiple child widgets are a type of widget, which


contains more than one child widget, and the layout of
these widgets are unique.
• For example, Row widget laying out of its child widget
in a horizontal direction, and Column widget laying out
of its child widget in a vertical direction.
• If we combine the Row and Column widget, then it can
build any level of the complex widget.
Multiple Child Widgets
• Row: It allows to arrange its child widgets in a horizontal direction.
• Column: It allows to arrange its child widgets in a vertical direction.
• ListView: It is the most popular scrolling widget that allows us to arrange its
child widgets one after another in scroll direction.
• GridView: It allows us to arrange its child widgets as a scrollable, 2D array
of widgets. It consists of a repeated pattern of cells arrayed in a horizontal
and vertical layout.
• Expanded: It allows to make the children of a Row and Column widget to
occupy the maximum possible area.
• Table: It is a widget that allows us to arrange its children in a table based
widget.
• Flow: It allows us to implements the flow-based widget.
• Stack: It is an essential widget, which is mainly used for overlapping several
children widgets. It allows you to put up the multiple layers onto the screen.

You might also like