Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Style a Flutter Text and Container Widget

    nader dabitnader dabit
    flutterFlutter
    dartDart
    androidAndroid
    iosiOS

    In this lesson we’ll learn how to style Text & Container widgets & also get a general understanding of how styling works in Flutter applications

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss