Style a Flutter Text and Container Widget
In this lesson we’ll learn how to style Text & Container widgets & also get a general understanding of how styling works in Flutter applications
Instructor: [00:01] We'll start with the very basic material app widget with an empty scaffold. The scaffold class is what implements the basic material design layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.
[00:15] The property of the scaffold we'll be implementing is the body, which contains the primary content of the scaffold. Within the body, we'll first lay out a center widget. Center is a widget that centers its child within itself. We'll give the center widget a child of column, a widget that displays its children in a vertical array.
[00:34] We can specify the main axis alignment of the column, which will dictate how the children should be placed along the main axis in the flex layout. Main axis alignment.center will center the items in the column. We can now pass an array of children to the column.
[00:49] The next widget we'll use is a container widget. Container is a convenience widget that combines common paning, positioning, and sizing widgets, allowing us to expressively style the widget. Container accepts a child widget which we'll pass in as text.
[01:07] The first argument to text should be the string which you'd like to display.
[01:12] Next, we'll add some styling to the text widget. To style the text widget, you can pass a style property of text style. For the text style, we'll update the color, the font weight, and the font size of the text.
[01:41] To add styling to the container, we'll add a decoration property of box decoration. To update the background color, we'll set a color property of colors.black. Next, we'll pass in a width and a height for our container.
[02:05] To align properties in a container, we can pass in an alignment property. The alignment that we'll use is alignment.center, which will align items along the vertical and the horizontal axis.
[02:18] Next, we'll add a border radius to our container. The property that we'll give is border radius.circular, passing in the value that we'd like to display.