Name: Style a Flutter Text and Container Widget
Uploaded: 2018-12-11T14:33:01-06:00
Description: In this lesson we’ll learn how to style Text & Container widgets & also get a general understanding of how styling works in Flutter applications

Install the Flutter SDK & Create Your First Project

Flutter Project Walkthrough

Run a Flutter App on iOS

Run a Flutter App on Android

Walkthrough of the Default Flutter Application Boilerplate

Style a Flutter Text and Container Widget

Using Themes in Flutter to Share Colors and Font Styles

Load an Image in a Flutter App with the Image Class

Building Layouts in Flutter with Layout Widgets

Creating, Importing & Using Dynamic Widgets from Other Files in a Flutter Application

Creating & Updating State in a Flutter Application

Getting Started with Navigation in Flutter

Building Dynamic Lists in Flutter with ListViews

Navigation with Named Routes in Flutter

Getting Started with Flutter

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.

Style a Flutter Text and Container Widget

Share this video with your friends

Course

Getting Started with Flutter