Welcome to the Flutter layout codelab, where you learn how to build a Flutter UI without downloading and installing Flutter or Dart!
Flutter is different from other frameworks because its UI is built in code, not (for example) in an XML file or similar. Widgets are the basic building blocks of a Flutter UI. As you progress through this codelab, you’ll learn that almost everything in Flutter is a widget. A widget is an immutable object that describes a specific part of a UI. You’ll also learn that Flutter widgets are composable, meaning, that you can combine existing widgets to make more sophisticated widgets. At the end of this codelab, you’ll get to apply what you’ve learned into building a Flutter UI that displays a business card.
Estimated time to complete this codelab: 45-60 minutes.
Row and Column classes
Column are classes that contain and lay out widgets.
Widgets inside of a
Column are called children,
Column are referred to as parents.
Row lays out its widgets horizontally,
Column lays out its widgets vertically.
Example: Creating a Column
Axis size and alignment
So far, the
BlueBox widgets have been squished together
(either to the left or at the top of the UI Output).
You can change how the
BlueBox widgets are spaced
out using the axis size and alignment properties.
Column occupy different main axes.
Row’s main axis is horizontal,
Column’s main axis is vertical.
mainAxisSize property determines how much
Column can occupy on their main axes.
mainAxisSize property has two possible values:
Columnoccupy all of the space on their main axes. If the combined width of their children is less than the total space on their main axes, their children are laid out with extra space.
Columnonly occupy enough space on their main axes for their children. Their children are laid out without extra space and at the middle of their main axes.
Example: Modifying axis size
mainAxisSize is set to
Column might lay out their children with extra space.
mainAxisAlignment property determines how
can position their children in that extra space.
mainAxisAlignment has six possible values:
- Positions children near the beginning of the main axis.
Row, top for
- Positions children near the end of the main axis.
Row, bottom for
- Positions children at the middle of the main axis.
- Divides the extra space evenly between children.
- Divides the extra space evenly between children and before and after the children.
- Similar to
MainAxisAlignment.spaceEvenly, but reduces half of the space before the first child and after the last child to half of the width between the children.
Example: Modifying main axis alignment
crossAxisAlignment property determines
Column can position their children
on their cross axes.
Row’s cross axis is vertical,
Column’s cross axis is horizontal.
Most of the
crossAxisAlignment property’s values
only work with the
crossAxisAlignment property has five possible values:
- Positions children near the top of the cross axis. (
- Positions children near the bottom of the cross axis. (
- Positions children at the middle of the cross axis. (
- Stretches children across the cross axis.
Row, left-to-right for
- Aligns children by their character baselines.
Textclass only, and requires that the
textBaselineproperty is set to
TextBaseline.alphabetic. See the Text widget section for an example.)
Example: Modifying cross axis alignment
As you’ve seen, the
crossAxisAlignment properties determine
Column position widgets along both axes.
Column first lay out widgets of a fixed size.
Fixed size widgets are considered inflexible because
they can’t resize themselves after they’ve been laid out.
Flexible widget wraps a widget,
so the widget becomes resizable.
Flexible widget wraps a widget,
the widget becomes the
Flexible widget’s child
and is considered flexible.
After inflexible widgets are laid out,
the widgets are resized according to their
- Compares itself against other
flexproperties before determining what fraction of the total remaining space each
- Determines whether a
Flexiblewidget fills all of its extra space.
Example: Changing fit properties
Example: Testing flex values
Expanded widget can
wrap a widget and force the widget to fill extra space.
Example: Filling extra space
SizedBox widget can be used in one of two ways when
creating exact dimensions.
SizedBox wraps a widget, it resizes the widget
When it doesn’t wrap a widget,
it uses the
width properties to
create empty space.
Example: Resizing a widget
Example: Creating space
Spacer widget also
can create space between widgets.
Example: Creating more space
Text widget displays text and can be configured
for different fonts, sizes, and colors.
Example: Aligning text
Example: Creating an Icon
Image widget displays an image.
You either can reference images using a URL,
or you can include images inside your app package.
Since DartPad can’t package an image,
the following example uses an image from the network.
Example: Displaying an image
Putting it all together
You’re almost at the end of this codelab. If you’d like to test your knowledge of the techniques that you’ve learned, why not apply those skills into building a Flutter UI that displays a business card!
You’ll break down Flutter’s layout into parts, which is how you’d create a Flutter UI in the real world.
In Part 1,
you’ll implement a
Column that contains the name and title.
Then you’ll wrap the
Column in a
Row that contains the icon,
which is positioned to the left of the name and title.
In Part 2, you’ll wrap the
Row in a
so the code contains a
Column within a
Row within a
Then you’ll tweak the outermost
so it looks nice.
Finally, you’ll add the contact information
to the outermost
Column’s list of children,
so it’s displayed below the name, title, and icon.
In Part 3, you’ll finish building the business card display by adding four more icons, which are positioned below the contact information.
Exercise: Create the name and title
Exercise: Wrap the Column in a Row
Exercise: Tweak the layout
Exercise: Enter contact information
Exercise: Add four icons
Congratulations, you’ve finished this codelab! If you’d like to know more about Flutter, here are a few suggestions for resources worth exploring:
- Learn more about layouts in Flutter by visiting the Building layouts page.
- Check out the sample apps.
- Visit Flutter’s YouTube channel, where you can watch a variety videos from videos that focus on individual widgets to videos of developers building apps.
You can download Flutter from the install page.