Flutter UI Components

Everything Is a Widget

In Flutter, the user interface is built from widgets. Think of them as individual LEGO bricks. You have bricks for text, bricks for images, bricks for buttons, and even bricks for laying out other bricks. Your entire app screen is just a clever arrangement of these widgets nested inside each other.

Widgets are the core building blocks of every Flutter app.

Let's start with the most common ones you'll use every day: displaying text, showing an image, and creating a button.

Text('Hello, Flutter!');

That's it. The Text widget takes a string and displays it on the screen. But plain text is boring. You can give it a style property to change its appearance. This is how you control things like font size, weight, and color.

Text(
  'Welcome to your app!',
  style: TextStyle(
    fontSize: 24.0,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
);

To display an image, you can use the Image widget. It's flexible enough to load images from different sources. A common way is to load one directly from a URL on the internet.

Image.network(
  'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'
);

Buttons make an app interactive. Flutter has several types, but ElevatedButton is a popular choice for a standard, raised button with a shadow. Every button needs an onPressed function, which is the code that runs when the user taps it. For now, we can leave it empty.

ElevatedButton(
  onPressed: () {
    // This code runs on tap
  },
  child: Text('Click Me'),
);

Arranging Your Widgets

Having a button and some text is great, but they can't just float around randomly. You need to tell Flutter how to arrange them. This is where layout widgets come in. The two most fundamental are Row and Column.

Column

noun

A widget that arranges its children in a vertical line from top to bottom.

Imagine you're building a simple profile card. You'd want the profile picture, the name, and the user's title stacked vertically. A Column is perfect for this.

Column(
  children: <Widget>[
    Image.network('...profile.jpg'),
    Text('Jane Doe'),
    Text('Software Engineer'),
  ],
);

Row

noun

A widget that arranges its children in a horizontal line from left to right.

What if you want to add a "Follow" button and a "Message" button next to each other under the user's title? You'd use a Row.

Sometimes you need to place widgets on top of each other. For example, you might want to display text over an image. For that, you use a Stack.

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    Image.network('...background.jpg'),
    Text(
      'Welcome!',
      style: TextStyle(
        color: Colors.white,
        fontSize: 32,
      ),
    ),
  ],
);

The first child in the list is the bottom layer, and subsequent children are placed on top.

Creating a Simple Login Screen

Let's combine these concepts to build a basic login screen. We'll need a vertical layout for the app logo, two text fields, and a login button. A Column is the perfect tool for the job.

By nesting Row and Column widgets, and styling the basic widgets like Text and Image, you can build complex, responsive user interfaces. The key is to think in terms of breaking down the design into simple horizontal and vertical groups.

Quiz Questions 1/5

In Flutter, what is the fundamental building block for creating every part of the user interface?

Quiz Questions 2/5

If you wanted to display a 'Follow' button and a 'Message' button next to each other, horizontally, which layout widget would be the most appropriate choice?

This is just the beginning. Mastering these fundamental widgets and layout patterns is the first step toward building beautiful and functional Flutter apps.

Flutter App Development Fundamentals