In Flutter, everything you see on the screen is a widget. From simple text labels to complex navigation, widgets are the fundamental building blocks of your user interface. This section will explore some of the most commonly used widgets, providing you with the practical knowledge to start constructing your own beautiful Flutter applications.
Let's dive into some essential widgets you'll be using frequently:
Text Widget
The Text widget is used to display a string of text. It's incredibly versatile and allows for styling such as font size, color, weight, and more.
Text(
'Hello, Flutter Fundamentals!',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
)Container Widget
The Container widget is a multipurpose widget that can be used for styling, positioning, and sizing other widgets. It's often used for padding, margins, borders, and background colors.
Container(
width: 150,
height: 100,
padding: EdgeInsets.all(20),
margin: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(10),
),
child: Text('Styled Box'),
)Row and Column Widgets
These widgets are essential for arranging other widgets horizontally (Row) or vertically (Column). They are fundamental for creating layouts.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.star),
Text('Item 1'),
Icon(Icons.favorite),
],
)
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Top'),
Text('Middle'),
Text('Bottom'),
],
)Image Widget
Displays images from various sources, including network URLs, local assets, or memory.