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 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.