Flutter is a powerful framework that allows you to easily create attractive User Interfaces (UI). In this lesson 11.2, we will delve deeply into the layout composition in Flutter. Layout composition is a crucial process for effectively placing complex UI elements. In this process, we will utilize various widgets and the layout system provided by Flutter.<\/p>\n
Layout refers to the topic of how UI elements are arranged on the screen. Flutter uses widgets to compose layouts. Everything in Flutter is made up of widgets, and these widgets combine to form complex UIs. The layout system primarily uses containers, so the properties of the container determine the position of the UI.<\/p>\n
In Flutter, widgets are the components of the UI, and each widget has its own properties and layout. Flutter’s widgets are broadly categorized into StatelessWidget and StatefulWidget. StatelessWidget does not have a state and is used to create unchanging UIs. Conversely, StatefulWidget has a state and changes the UI according to state changes.<\/p>\n
Widgets have a parent-child relationship. A parent widget can include child widgets, enabling layout composition. For example, the Flutter provides various layout widgets. In this section, we will look at the key layout widgets that are commonly used.<\/p>\n The The The The The We will learn about the main properties that can be used when configuring layout widgets.<\/p>\n You can use the Margins can be set as properties of the Now, let’s create more complex layouts from simple widget compositions. We will combine multiple widgets to form a more realistic UI.<\/p>\n Let’s create a simple layout displaying information using a card. We will combine various widgets to create a UI that includes all elements.<\/p>\n It is also essential to create responsive layouts to allow users to use the application on various screen sizes.<\/p>\n In Flutter, you can use Column<\/code> widget can arrange multiple child widgets vertically.<\/p>\n2. Layout Widgets in Flutter<\/h2>\n
2.1. Container<\/h3>\n
Container<\/code> widget is the most basic widget and allows you to encapsulate other widgets to adjust size, padding, margins, etc. You can apply additional styles such as background color and borders using the Container<\/code>.<\/p>\nContainer(\n width: 200,\n height: 100,\n color: Colors.blue,\n padding: EdgeInsets.all(10),\n child: Text('Hello, Flutter!'),\n)<\/code><\/pre>\n2.2. Row<\/h3>\n
Row<\/code> widget arranges child widgets horizontally. You can define alignment methods using the mainAxisAlignment<\/code> and crossAxisAlignment<\/code> properties.<\/p>\nRow(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: 2.3. Column<\/h3>\n
Column<\/code> widget lists child widgets vertically. Similarly, you can adjust arrangements through mainAxisAlignment<\/code> and crossAxisAlignment<\/code>.<\/p>\nColumn(\n mainAxisAlignment: MainAxisAlignment.start,\n children: 2.4. Stack<\/h3>\n
Stack<\/code> widget stacks multiple widgets on top of each other. You can adjust the position of each child widget using the Positioned<\/code> widget.<\/p>\nStack(\n children: 2.5. ListView<\/h3>\n
ListView<\/code> widget creates a scrollable list. It is very useful for easily listing multiple items.<\/p>\nListView(\n children: 3. Layout Properties<\/h2>\n
3.1. Padding<\/h3>\n
Padding<\/code> widget to add padding to a widget, setting space around child widgets.<\/p>\nPadding(\n padding: EdgeInsets.all(16.0),\n child: Text('Hello, Flutter!'),\n)<\/code><\/pre>\n3.2. Margin<\/h3>\n
Container<\/code> widget. This property expands the space around the child widget.<\/p>\nContainer(\n margin: EdgeInsets.all(20),\n child: Text('Hello with Margin!'),\n)<\/code><\/pre>\n4. Composing Complex Layouts<\/h2>\n
4.1. Creating a Card Layout<\/h3>\n
Card(\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: 5. Composing Responsive Layouts<\/h2>\n
5.1. Using MediaQuery<\/h3>\n
MediaQuery<\/code> to dynamically detect the size of the screen. This allows you to apply designs suitable for various screen sizes.<\/p>\nfinal width = MediaQuery.of(context).size.width;\nfinal height = MediaQuery.of(context).size.height;\n<\/code><\/pre>\n5.2. LayoutBuilder<\/h3>\n