Icon
Get In Touch
HomeShop OnlineFree ResourcesBlog / NewsLearn How ToTerms And ConditionsContact Us
#flutter

Understanding Widgets and Basic Layout

Widgets are the building blocks of Flutter apps. This section dives into different types of widgets, layouts, and how to structure your UI.

Types of Widgets

Stateless Widgets: Do not change once rendered.
Stateful Widgets: Can change dynamically and maintain state across multiple frames.

Basic Layout Widgets

01. Column: Aligns widgets vertically.
02. Row: Aligns widgets horizontally.
03. Container: A versatile widget for adding padding, margins, borders, and backgrounds.
04. Wrap: Aligns widgets in a horizontal or vertical flow. When there's not enough space, the widgets automatically wrap to the next line.
05. Expanded: A widget that expands to fill the available space within a parent widget like a Row, Column, or Flex. It takes up the remaining available space based on the flex factor.

Creating a Layout

Lets create a simple app layout using these basic widgets:

1
import 'package:flutter/material.dart';
2


3
void main() {
4
  runApp(const MainApp());
5
}
6


7
class MainApp extends StatelessWidget {
8
  const MainApp({super.key});
9


10
  @override
11
  Widget build(BuildContext context) {
12
    return MaterialApp(
13
      debugShowCheckedModeBanner: false,
14
      home: Scaffold(
15
        appBar: AppBar(
16
          title: const Text("Basic Layout with Wrap and Expanded"),
17
        ),
18
        body: Column(
19
          //Aligns widgets vertically.
20
          mainAxisAlignment: MainAxisAlignment.center,
21
          children: <Widget>[
22
            const Text('This is a text widget'),
23
            ElevatedButton(
24
              onPressed: () {},
25
              child: const Text('Click Me'),
26
            ),
27
            Container(
28
              //A versatile widget for adding padding, margins, borders, and backgrounds.
29
              padding: const EdgeInsets.all(20.0),
30
              color: Colors.blue,
31
              child: const Text('Container widget with padding'),
32
            ),
33
            const Wrap(
34
              // A Wrap widget arranges its children in a flow layout
35
              spacing: 10.0, // Space between children
36
              runSpacing: 5.0, // Space between lines
37
              children: <Widget>[
38
                Chip(label: Text('Chip 1')),
39
                Chip(label: Text('Chip 2')),
40
                Chip(label: Text('Chip 3')),
41
                Chip(label: Text('Chip 4')),
42
              ],
43
            ),
44
            Row(
45
              //Aligns widgets horizontally.
46
              children: <Widget>[
47
                Expanded(
48
                  //A widget that expands to fill the available space in the parent
49
                  child: Container(
50
                    color: Colors.red,
51
                    height: 50.0,
52
                    child: const Center(child: Text('Expanded Widget 1')),
53
                  ),
54
                ),
55
                Expanded(
56
                  child: Container(
57
                    color: Colors.green,
58
                    height: 50.0,
59
                    child: const Center(child: Text('Expanded Widget 2')),
60
                  ),
61
                ),
62
              ],
63
            ),
64
          ],
65
        ),
66
      ),
67
    );
68
  }
69
}

Key Takeaways

- Column and Row widgets help structure your layout by arranging widgets vertically and horizontally.
- Container can be used for styling, padding, margins, and applying backgrounds.
- Wrap is handy for responsive layouts, where widgets should flow into new lines when the space is insufficient.
- Expanded is used to allocate the available space among children in a Row or Column.

By combining these widgets, you can create complex and responsive layouts in Flutter with ease.

©2024 Codeblockz

Privacy Policy