Your Second Flutter App

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

Most mobile apps make network calls to the internet to send and retrieve data to a backend server or API. The sequence of events in a typical network call is as follows. Your app sends a request to a remote server, the server processes the request and sends a response back to your app. Your app then processes the response and then takes an appropriate action. In some cases, the action might be to show the response data to the user, or the app may save the data to a database within your app. A typical network call from a mobile app is what is known as a REST API of which the raywenderlich API is an example. The request-response sequence just described follows the REST API pattern. REST API calls are made using a network protocol called HTTP, which stands for Hypertext Transfer Protocol. To learn more about HTTP, you can watch the episode from our course, Server Side Swift with Vapor. The response is returned in JSON, otherwise known as JavaScript Object Notation. This is machine independent format used to pass data around. A lot of REST services use JSON because it is easy to understand and parse. JSON is beyond the scope of this course, but if you're interested in learning more about JSON, check out the link in the author notes. In this episode, you'll learn how to make an HTTP request in Flutter. In the next episode, you'll see how to process the response that comes back from the server. Open your project in progress or download the current starter project for this episode. We want to make an HTTP request. There's actually a Flutter package that allows us to do this. There's a number of ways to add a package to our project. I prefer to use the terminal which is integrated right inside of Visual Studio itself. First, let's check out the HTTP package. Open up a browser and navigate to the following URL. You'll see the documentation for the package. You'll see a brief description followed by some examples. Click on the Installing tab. You'll see that it provides instructions for the terminal. Copy the With Flutter commands and return back to Visual Studio. Paste it into the terminal. Congratulations, you installed a dependency. Open up course_repository.dart in the repository folder. We need to import the dependency. Switch back to your browser and select the Readme tab. Look under Using, you'll see an example of an import statement. Copy it, return back to Visual Studio code and paste it Now, in get courses, add the following after the If statement. First, we convert the URL to our URI and then make the actual request. Now we need to convert the response to JSON. You'll learn more about JSON in the next episode. For now, we'll do a conversion. We're getting an error because we need to import the convert library. Select the JSON and press Command + Period on Mac or Control + Period on windows. Select import library 'dart:convert. At this point, we made a request to the network and printed out the response. Now we want to see that response. Remember, a network request can take a period of time, so we need to wrap it in a future. To do this, we'll create a controller. A controller will make the network request in a future. Create a new file in the UI courses folder. Call it courses_controller.dart. Then, create a simple class. Next, import the repository, course repository in the course model object. Then, add a repository property. Now, at a fetch courses method. This will return a future. This future will return a list of courses. So now we have our controller. We need a page to display the results. Granted our network call is only printing to the console at the moment, but in an upcoming episode, you'll have it print results to the screen instead. Let's use our courses_page, open it up. Import our courses controller and add a property to it in the CoursesPageState. Okay, we now need to make the network request. We'll do this in our build method. This poses a problem. The build method will be called right away, yet we don't know how long our network request will take. Thankfully, Flutter has provided a FutureBuilder. This informs the framework when the future is complete. Add the following. The FutureBuilder comes with a builder property. This passes in a context and a snapshot. The snapshot will contain various states of the future as it comes back. Use the data property on the snapshot to get a hold of the list of courses. If there are no courses returned, the UI will display a circular progress indicator, letting the user know that there is network activity occurring in the background. Otherwise, we'll use a simple text to print a message to the screen. That said, once the text is printed, our API response will also be printed in the console. We're getting one more error, make sure to import course.dart. Now to call it, open rwcoursesapp.dart. First, import the courses_page. After the app bar property, add a body property passing in the CoursesPage. And that's it. Build and run or hot reload. Now look at the console. You'll see the API response printed to the console, all ready to be used.