Calling REST API from a Flutter App

Building Flutter applications whose content is static can be a bad idea. Instead, you should consider building applications that can fetch content from the Web server.

In this tutorial, I’m going to show you how to use the classes and methods available in the Flutter SDK to connect to remote web servers and interact with them using their REST APIs.

Calling REST API from a Flutter App

Creating an HTTP Connection


To create an HTTP Client we need to add an import.

The following code snippet shows you how to setup a connection with the GitHub API endpoint:

Note that the HTTP APIs use Dart Futures in the return values.Flutter recommend using the API calls with the async/await syntax.

 

Responsive UI


Network calls are slow. It doesn’t matter where you are on your phone. Sometimes, your server might be slow and you just don’t want to show a white page. So you want to show a progress bar. There is a great library called async_loader. Following code snippet show how to use it.

Usage

To use this plugin, add async_loader as a dependency in your pubspec.yaml file.

Create instance

You need to create an async loader in your build function.It has a few parameters.It has initState,renderLoad,renderError,and renderSuccess.

initState is basically as the widget is floating, what do you want to load?what data do you want to load?

renderLoad is as it’s being loaded, what do you want to show? So in renderLoad, I show a progress bar.

renderError is if something went crazy wrong, what do you want to do? So here for the sake of the demo, I just have new text error loading conversation.

renderSuccess is called with your data that you return in your initState. And then you can take that data, and then you can actually render your entire UI.

JSON Parsing


In Android, you can use GSON for JSON parsing.There’s nothing like this on Flutter, mainly because Flutter doesn’t have a reflection.There is a great library called json_serializable.

Setting up json_serializable

To include json_serializable, you need one regular and two dev dependencies. dev dependencies are dependencies that are not included in your app source code.

Check the latest versions.

pubspec.yaml

Click “Packages Get” in your editor to make these new dependencies available in your project.

Convert  User class to a json_serializable .

user.dart

When creating json_serializable classes the first time, you will get errors.Because the generated code for the model class does not exist yet. To resolve this, you must run the code generator that generates the serialization boilerplate for us.

By running (in command prompt)flutter packages pub run build_runner build in our project root, you can generate json serialization code for our models whenever needed.

Consuming json_serializable models

To deserialize a JSON string json_serializable way, we do not have actually to make any changes to our previous code.

Same goes for serialization. The calling API is the same as before.

 

Download Project from GitHub

 

Flutter Shared preferences

If you have a relatively small collection of key-values that you’d like to save, you should use the SharedPreferences Plugin. A SharedPreferences object points to a file containing key-value pairs and provides simple methods to read and write them.

Flutter Shared preferences plugin Wraps NSUserDefaults (on iOS) and SharedPreferences (on Android), providing a persistent store for simple data. Data is persisted to disk automatically and asynchronously.

To use this plugin, add shared_preferences as a dependency in your pubspec.yaml file.

1.Add this to your package’s pubspec.yaml file:

2. You can install packages from editor ‘packages get’

Shared preferences plugin

3. Import it

Write to Shared Preferences


To write to a shared preferences file, create a SharedPreferences by calling getInstance on your SharedPreferences.

Pass the keys and values you want to write with methods such as setInt() and setString().For example:

Read from Shared Preferences


To retrieve values from a shared preferences file, call methods such as getInt() and getString(), providing the key for the value you want, and optionally a default value to return if the key isn’t present. For example:

Related Post

Flutter ListView with Image and Checkbox

 

Flutter ListView with Image and Checkbox

In this post, you will learn how to implement basic single line ListView with Image and Checkbox.First, Create new Flutter Project in your IntelliJ Idea.

1.Adding Assets and Images in Flutter


Flutter apps can include both code and assets. An asset is a file that is bundled and deployed with your app and is accessible at runtime.

Specifying assets

Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app.

The assets subsection of the flutter section specifies files that should be included with the app. Each asset is identified by an explicit path (relative to the pubspec.yaml file) where the asset file is located. The order in which the assets are declared does not matter.

Add assets image in flutter

The main asset is assumed to correspond to a resolution of 1.0. For example, consider the following asset layout for an image named person.png:

  • …/person.png
  • …/2.0x/person.png
  • …/3.0x/person.png

On devices with a device pixel ratio of 1.8, the asset …/2.0x/person.png would be chosen. For a device pixel ratio of 2.7, the asset …/3.0x/person.png would be chosen.

2.Create Presentation Class


We’ll create purchase application, which displays various products offered for and maintains a purchase list. Let’s start by defining our presentation class, Product:

3.Create List  Item


ListTiles are always a fixed height (which height depends on how isThreeLine, dense, and subtitle are configured); they do not grow in height based on their contents. If you are looking for a widget that allows for arbitrary layout in a row, consider Row.

The ShoppingListItem widget follows a common pattern for stateful widgets. It stores the values it receives in its constructor in member variables, which it then uses during its function.

4.Create Listview


The parent creates a new instance of ShoppingListItem when it rebuilds, that operation is cheap because the framework compares the newly built widgets with the previously built widgets and applies only the differences to the underlying render objects.

Let’s look at an example parent widget that stores mutable state:

The ShoppingList class extends StatefulWidget, which means this widget stores mutable state. When the ShoppingListwidget is first inserted into the tree, the framework calls the createState function to create a fresh instance of _ShoppingListState to associate with that location in the tree.

To access properties of the current ShoppingList, the _ShoppingListState can use its widget property. If the parent rebuilds and creates a new ShoppingList, the _ShoppingListState will also rebuild with the new widget value. If you wish to be notified when the widget property changes, you can override the didUpdateWidget function, which is passed oldWidget to let you compare the old widget with the current widget.

Flutter ListView With Checkbox

Download this project from GitHub

 

Building Your First Flutter App

In this post, you’ll learn how to create a Flutter project with the IntelliJ idea and run a debuggable version of the app. You’ll also learn some fundamentals of Flutter app design, including how to build a simple user interface and handle user input.

Before you start this, install Flutter.

1. Create a Flutter Project


  1. File>New Project.
  2. Select Flutter application as the project type
  3. Enter a project name
  4. Click Finish
    Flutter Hello World

2.Create Widget


Your entire app is going to be made out of widgets. Your app is one huge widget, which has sub-widgets, which has sub-widgets, all the way down. Widgets are just like components.

Create Stateless widget

A stateless widget is a widget that describes part of the user interface. The stateless widget is useful when the part of the user interface you are describing does not depend on anything other than the configuration information in the object itself.

Create Scaffold widget

Scaffold Implements the basic material design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.

AppBar

An app bar consists of a toolbar, a TabBar and a FlexibleSpaceBar.App bars are typically used in the Scaffold.AppBar property, which places the app bar as a fixed-height widget at the top of the screen.

The AppBar widget lets us pass in widgets for the leading and the actions of the title widget.

Using Material Design

A Material Design app starts with the MaterialApp widget, which builds a number of useful widgets at the root of your app, including a Navigator, which manages a stack of widgets identified by strings, also known as “routes”. The Navigator lets you transition smoothly between screens of your application. Using the MaterialApp widget is entirely optional but a good practice.

Flutter Hello World

Now, AppBar and Scaffold widgets from material.dart, our app is starting to look at a bit more like Material Design. For example, the app bar has a shadow and the title text inherits the correct styling automatically. We’ve also added a floating action button for good measure.