Tutorial Get Data API di Flutter

Pada tutorial kali ini kita akan membahas bagaimana cara mendapatkan data API di flutter. API adalah Application Programming Interface, yakni sebuah interface yang dapat menghubungkan aplikasi satu dengan aplikasi lainnya. Jadi, API di sini seakan-akan berfungsi sebagai jembatan antar berbagai aplikasi atau script yang berbeda, entah itu platform yang sama atau beda.

Untuk tutorial ini kita akan menggunakan data API dari https://reqres.in/ dan menggunakan dependencies http bisa didapatkan di https://pub.dev/packages/http.

1. Buat dulu project-nya

$ flutter create belajar_api

2. Tambahkan package http di pubspec.yaml

dependencies:
  http: ^0.13.4

Semakin bertambahnya waktu bisa saja dependencies http yang diatas berubah, jadi harus dicocokkan dengan yang ada di https://pub.dev/packages/http ya

3. Lalu import http package dan juga convert. Convert disini berguna untuk mengubah data JSON yang ada di https://reqres.in/ agar bisa digunakan di aplikasi

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  final String apiUrl = "https://reqres.in/api/users?per_page=6";
  Future<List<dynamic>> _fecthData() async {
    var result = await http.get(Uri.parse(apiUrl));
    return json.decode(result.body)['data'];
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Belajar API'),
      ),
      body: Container(
        child: FutureBuilder<List<dynamic>>(
          future: _fecthData(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                  padding: EdgeInsets.all(10),
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int index) {
                    return ListTile(
                      leading: CircleAvatar(
                        radius: 30,
                        backgroundImage:
                            NetworkImage(snapshot.data[index]['avatar']),
                      ),
                      title: Text(snapshot.data[index]['first_name'] +
                          " " +
                          snapshot.data[index]['last_name']),
                      subtitle: Text(snapshot.data[index]['email']),
                    );
                  });
            } else {
              return Center(child: CircularProgressIndicator());
            }
          },
        ),
      ),
    );
  }
}

Hasilnya nanti akan seperti ini :

Pembahasan dari kode diatas:

final String apiUrl = "https://reqres.in/api/users?per_page=6";
  Future<List<dynamic>> _fecthDataUsers() async {
    var result = await http.get(Uri.parse(apiUrl));
    return json.decode(result.body)['data'];

Kode di atas menjelaskan jika kita ingin menggunakan api kita buat deklarasikan Url dari api di atas yaitu:

final String apiUrl = "https://reqres.in/api/users?per_page=6";

Atau Anda bisa langsung menuliskan langsung alamat API langsung di

var result = await http.get(Uri.parse("https://reqres.in/api/users?per_page=6"));

Jadi nanti akan seperti ini

Future<List<dynamic>> _fecthData() async {
    var result = await http.get(Uri.parse("https://reqres.in/api/users?per_page=6"));
    return json.decode(result.body)['data'];

Dari kedua kode di atas akan menghasilkan hasil yang sama tapi sebaiknya menggunakan yang pertama karena jika kode kalian dibaca atau digunakan oleh orang lain akan lebih memudahkan orang lain tersebut.

Lalu apa arti dari kode yang ini?

  Future<List<dynamic>> _fecthData() async {
    var result = await http.get(Uri.parse("https://reqres.in/api/users?per_page=6"));
    return json.decode(result.body)['data'];
  }

Fungsi _fecthData digunakan untuk memanggil API dari string apiURL dengan http.get. Karena kita ingin menunggu respons API sebelum melanjutkan ke proses berikutnya, kita memerlukan fungsi asynchronous dengan menambahkan asynchronous setelah nama fungsi dan menunggu proses yang ingin kita tunggu.

Dan karena kita tidak ingin menyetel output API respons, kita dapat menggunakan daftar tipe List<<dynamic>>. Dalam proyek nyata, pertama-tama kita harus menentukan format output berdasarkan tipe data dan struktur data untuk meminimalkan kesalahan dan membuat data lebih mudah dibaca.

Lalu untuk menampilkan data tersebut kita harus menggunakan Listview.builder

child: FutureBuilder<List<dynamic>>(
          future: _fecthData(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(

Dengan membuat FutureBuilder terlebih dahulu, kita bisa menggunakan data dari JSON yang disediakan oleh https://reqres.in/

return ListTile(
                      leading: CircleAvatar(
                        radius: 30,
                        backgroundImage:
                            NetworkImage(snapshot.data[index]['avatar']),
                      ),
                      title: Text(snapshot.data[index]['first_name'] +
                          " " +
                          snapshot.data[index]['last_name']),
                      subtitle: Text(snapshot.data[index]['email']),
                    );
                  });

Kemudian untuk menggunakan data JSON dapat dilakukan dengan menuliskan seperti di atas dengan menggunakan widget yang sesuai. Selamat mencoba

arduino indo