Basic Widget Layout: Rows, Columns, and Containers
Welcome to your very first steps in building user interfaces with Flutter! At its core, Flutter's UI is built using widgets. These are the fundamental building blocks of your app's interface. Think of them like LEGO bricks – you combine them in various ways to create complex and beautiful designs. In this section, we'll explore some of the most fundamental layout widgets that will form the backbone of your UI: Container, Row, and Column.
The Container widget is your versatile toolbox for styling and positioning. It's a widget that can hold a single child widget and apply various properties like padding, margins, borders, background colors, and even transformations. It's incredibly useful for giving individual elements a distinct look and feel.
Container(
width: 150.0,
height: 150.0,
color: Colors.blue,
child: Text(
'Hello Container',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
)Now, let's talk about arranging widgets horizontally. The Row widget is exactly what it sounds like: it lays out its children widgets in a horizontal line. You can control how these children are aligned and spaced within the Row.
Row(
children: <Widget>[
Icon(Icons.star),
Text('Flutter'),
Icon(Icons.favorite),
],
)Similarly, if you need to arrange widgets vertically, the Column widget is your go-to. It stacks its children widgets one above the other. Just like Row, you have control over alignment and spacing.
Column(
children: <Widget>[
Text('First Line'),
Text('Second Line'),
Icon(Icons.sentiment_satisfied),
],
)Understanding how Row and Column distribute their children is crucial. Both widgets have mainAxisAlignment and crossAxisAlignment properties. mainAxisAlignment controls alignment along the main axis (horizontal for Row, vertical for Column), and crossAxisAlignment controls alignment along the perpendicular axis.