Delve into Flutter's UI framework to build high-quality Android apps, from creating contact profiles to enhancing them with themes and API integration, culminating in app publication.

Flutter is Google’s mobile UI framework used for crafting high-quality native interfaces on iOS and Android. This course focuses on building applications for the Android platform.

You’ll start by exploring the intricacies of Flutter and work your way up to implementing a contact profile page for an Android address book.

In the latter half of the course, you’ll learn to work with Flutter themes to spruce up the contact profile app you created. To round out your Flutter experience, you’ll also practice fetching data from a remote Application Programming Interface (API).

You’ll put into practice what you learn using live coding environments embedded within the course. By the time you’re done, you’ll be ready to create your own Android app and publish it to the Google Play Store.

Salahaddin Mohammed

I completed the course "Beginning Flutter: Android Mobile App Development" at the Educative platform. I have easily understood the course because of your great explanation. I want to thank you really!

Thank you letter from a student.

Beginning Flutter: Android Mobile App Development

# Introduction

In this lesson, you’ll add the contact’s display name below their profile picture as shown in the screenshot below:


# Add display name

The display name is right below the profile picture. Let’s start adding a `Container` widget with its `height` property as 60.
 
When the `width:` property is not defined, it takes the same value as its parent width element.

```
Container(
   height: 60,
),

```
We need a widget that can display the `Text` widget for the display name horizontally. The `Row` widget displays its children horizontally. Let’s add the `Row` widget as the `Container` widget’s `child`.

```
Container(
 height: 60,
 child: Row(
   children: <Widget>[],
 ),
),

```

# Styling text
Next, add the `Text` widget for the display name as the `Row` widget’s children. Add the `style:` property for the `Text` widget as `TextStyle(fontSize: 30)` to make the text's font a little bigger.

```
Container(
 height: 60,
 child: Row(
   children: <Widget>[
     Text(
       "Priyanka Tyagi",
       style: TextStyle(fontSize: 30),
     ),
   ],
 ),
),

```

# Aligning text

At this point, you’ll see the text is centered in the middle of the row. We want it to align with the start of the screen. This can be achieved using `Row` widget’s property `mainAxisAlignment: MainAxisAlignment.start`. This will align the text to the start of the screen.

```
Container(
 height: 60,
 child: Row(
   mainAxisAlignment: MainAxisAlignment.start,

   children: <Widget>[
     Text(
       "Priyanka Tyagi",
       style: TextStyle(fontSize: 30),
     ),
   ],
 ),
),
```

# Add padding

However, even after aligning the text, you will see the display name glued to the screen's edge. You may want to provide little spacing from the starting edge. This spacing can be provided using the `Padding` widget.

```
Padding(
 padding: const EdgeInsets.all(8.0),
 child: Text(
   "Priyanka Tyagi",
   style: TextStyle(fontSize: 30),
 ),
),

```

# Add divider

Lastly, add a grey, horizontal, thin line to separate display name text from the content below it using the `Divider` widget. 

```
Divider(
 color: Colors.grey,
),

```

# Run code

Let’s put everything we’ve learned so far together, and run the code in the Android Emulator.

You'll see that the display name is added along with a divider beneath it.

> Please note that Android Emulator might take longer (~3 minutes) to start.


In this lesson, you’ll add the contact’s display name below the profile picture.


Introduction

Hello Flutter !

Build your Contact Profile Page

Flutter Themes

MovieApp: Fetching Data from REST API

Where to Go from Here

Appendix: Installation & Setting up Flutter (Optional)

Profile Display Name

Introduction

Add display name