Dio Flutter REST Api Example

February 7, 2021March 28, 2021 Dhrumil Shah 1 Comment api integration in flutter, dio, flutter api calls, flutter dio, flutter http, flutter login example with api, flutter post request example, http flutter, http request flutter, new dio, rest api

In this article, you will learn how to use dio flutter library to call rest api in flutter applications through example. We previously used http package to call rest api in flutter applications.

Dio is networking library which is developed by flutter china. It supports FormData, File Downloading, Global Configuration, Interceptors, ConnectionTimeout etc. We can do basic things with http package for rest api. But if we want to do some advanced tasks with rest api then we should use dio library.

Dio library is very easy to use in flutter applications. Dio library is powerful http client and very useful for logging requests. In this example, we are getting users data from api using dio library.

Add below required dependency in your pubspec.yaml file

dio: 3.0.10

Create Response Classes for dio flutter

class User {
int id;
String name, email, phone, website;
Address address;
Company company;

User(
    {this.id,
    this.name,
    this.email,
    this.phone,
    this.website,
    this.address,
    this.company});

factory User.fromJSON(Map<String, dynamic> parsedJson) {
return User(
    id: parsedJson[‘id’],
    name: parsedJson[‘name’],
    email: parsedJson[’email’],
    phone: parsedJson[‘phone’],
    website: parsedJson[‘website’],
    address: Address.fromJSON(parsedJson[‘address’]),
    company: Company.fromJSON(parsedJson[‘company’]),
);
}
}

class Address {
String street, suite, city, zipcode;

Address({this.street, this.suite, this.city, this.zipcode});

factory Address.fromJSON(Map<String, dynamic> parsedJson) {
return Address(
    street: parsedJson[‘street’],
    suite: parsedJson[‘suite’],
    city: parsedJson[‘city’],
    zipcode: parsedJson[‘zipcode’],
);
}
}

class Company {
String name, catchPhrase, bs;

Company({this.name, this.catchPhrase, this.bs});

factory Company.fromJSON(Map<String, dynamic> parsedJson) {
return Company(
    name: parsedJson[‘name’],
    catchPhrase: parsedJson[‘catchPhrase’],
    bs: parsedJson[‘bs’]);
}
}

Get Users From Api using dio flutter

Future<List<User>> fetchUsers() async {
try {
    Response response = await Dio().get(‘https://jsonplaceholder.typicode.com/users’);
    if (response.statusCode == 200) {
        var getUsersData = response.data as List;
        var listUsers = getUsersData.map((i) => User.fromJSON(i)).toList();
        return listUsers;
        } else {
            throw Exception(‘Failed to load users’);
        }
    } catch (e) {
        print(e);
    }
}

@override
void initState() {
super.initState();
listUsers = fetchUsers();
}

Display Users Data

Scaffold(
body: FutureBuilder<List<User>>(
future: listUsers,
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.separated(
    itemBuilder: (context, index) {
    var user = (snapshot.data as List<User>)[index];
    return Container(
        padding: EdgeInsets.all(10),
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
                Text(user.name, style: TextStyle( fontWeight: FontWeight.bold, fontSize: 22)),
                SizedBox(height: 5),
                Text(user.email),
                SizedBox(height: 5),
                Text(user.address.street + ” ” + user.address.suite +” ” +user.address.city +” ” + user.address.zipcode),
                SizedBox(height: 5),
                Text(user.phone),
                SizedBox(height: 5),
                Text(user.website),
                SizedBox(height: 5),
                Text(user.company.name),
                SizedBox(height: 5),
                Text(user.company.catchPhrase),
            ],
        ),
    );
},
separatorBuilder: (context, index) {
    return Divider();
},
itemCount: (snapshot.data as List<User>).length);
} else if (snapshot.hasError) {
    return Center( child: Text(“${snapshot.error}”));
}
return Center(
    child: CircularProgressIndicator(backgroundColor: Colors.cyanAccent),
);
},
));