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

We'll learn to print movie data fetched from the TMDB API on the app's main screen as is.

# Building an interface
Let’s start building the interface to render data returned from API.

## App's entry point

`MoviesApp` is the entry point for `runApp()`. It's a `StatelessWidget`.

```
void main() => runApp(MoviesApp());
```

## The `MoviesApp` widget

The `MoviesApp` is a `MaterialApp`. We'll use a separate widget to build the listing part of the app. 

Let's name this widget as `MovieListing`. The `MovieListing` widget needs to be a `StatefulWidget` because we need to update listings based on the data received from the API/server.

We'll use this widget as the `home` property for the app.

```
//App level widget
class MoviesApp extends StatelessWidget {

 //Building interface for app
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     //removing debug banner 
     debugShowCheckedModeBanner: false,
 
     //Widget to building movie listing interface
     home: MoviesListing(),
   );
 }
}
```

## The `MovieListing` widget

The MovieListing widget is the main screen that displays movie data fetched from the network. 

We need to update the data after it is available from the API request. We need a way to inform the Flutter widget to update its interface to reflect the fresh available data. 

For this purpose, we would use Flutter’s `Stateful` widget. A [`Stateful`](https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html) widget rebuilds itself when a variable’s value is modified from the `setState()` method.

```
//Creating MovieListing widget
class MoviesListing extends StatefulWidget {
  @override
  _MoviesListingState createState() => _MoviesListingState();
}

//State part of the widget
class _MoviesListingState extends State<MoviesListing> {
  
}
```

## Updating data

Declare the `movies` variable to hold the data returned from the API response. 

```
class _MoviesListingState extends State<MoviesListing> {
  var movies;

  //Method to fetch movies
  fetchMovies() async {
    //Storing JSON response in data variable
    var data = await MoviesProvider.getJson();

    //updating movies 
    setState(() {
      movies = data['results'];
    });
  }
}
```


## Displaying data

For simplicity, we'll render the API response in a scrollable fashion using the `SingleChildScrollView` Flutter widget. When the `movies` variable is not `null`, it is rendered in the `Text` widget.

```
//Movie listing widget class
class _MoviesListingState extends State<MoviesListing> {
  
  //Building widget to display response
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //SingleChildScollView to accomodate dynamically sized data   
      body: SingleChildScrollView(
       //movies variable holds the data.
       //Printing movies variable, if it's not null 
        child: movies != null
            ? Text("TMDB Api response\n $movies")
            : Text("Loading api response"),
      ),
    );
  }
}
```

At this point, the response from API is rendered as a text blob on the main screen. 

In this lesson, we discuss fetching and printing API responses on screen in detail.

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)

Simple Interface

Building an interface

App’s entry point

The `MoviesApp` widget

Simple Interface

Building an interface

App’s entry point

The MoviesApp widget

The `MoviesApp` widget