Tutorial Menampilkan Data API Menggunakan Flutter

Halo teman-teman semua, pada artikel ini saya ingin berbagi ilmu pengetahuan mengenai cara bekerja dengan API menggunakan Flutter. Ketika kita membuat sebuah aplikasi yang berhubungan dengan data di cloud, tentunya kita tidak hanya menggunakan data di local device.

Oleh karena itu, pengetahuan mengenai cara mengakses API ini adalah hal yang wajib diketahui oleh Flutter Engineer. Berikut saya jelaskan bagaimana cara mengakses data API menggunakan Flutter.

Buat Project Flutter Baru

Hal pertama yang harus dilakukan adalah membuat project Flutter baru. Untuk membuatnya, ada beberapa cara yang bisa kita lakukan. Salah satunya dengan menggunakan cmd.

Pertama, kita tentukan dulu folder mana yang akan digunakan untuk menyimpan data project Flutter.

Kemudian, ketikkan cmd di bagian navigasi berkas, lalu tekan enter.

Selanjutnya jendela cmd akan terbuka. Dari sini kita bisa menggunakan perintah “flutter create nama_aplikasi” untuk membuat project baru. Project akan otomatis dibuat dan siap dibuka di text editor.

Jika teman-teman menggunakan Visual Studio Code, kita bisa membuat projectnya dengan metode di bawah ini.

Tekan ctrl+shift+p di keyboard, dan ketikkan Flutter: New Project lalu pilih pada menu yang tersedia.

Pilih template “Application”

Pilih folder tempat project akan disimpan

Selanjutnya kita tinggal memberi nama aplikasi yang akan dibuat sesuai dengan keinginan kita dan project pun akan dibuat secara otomatis. Selanjutnya kita akan langsung dialihkan ke folder project tersebut.

Siapkan API yang Akan Diakses

Untuk mengakses API ini, kita bisa menggunakan API JSON post di website https://jsonplaceholder.typicode.com. Website ini menyediakan API fake secara gratis untuk pembelajaran.

Ada beberapa resource API yang bisa kita gunakan yaitu post, comments, albums, photos, todos, dan users. Pada tutorial ini kita akan menggunakan API posts. Untuk mengaksesnya kita cukup menambahkan “/posts” pada url websitenya yaitu https://jsonplaceholder.typicode.com/posts.

Jika url ini dibuka di browser maka kita akan mendapatkan tampilan sebagai berikut:

Di sini akan terlihat seperti array object. Selanjutnya, kita harus menyiapkan class model untuk menampung data API ini.

Berdasarkan gambar di atas, kita harus membuat 3 buah variable yaitu id, title, dan body. Untuk userId bisa kita hiraukan karena data tersebut semuanya sama, sehingga dianggap tidak terlalu penting di tutorial ini.

Membuat Model

Untuk membuat model, kita harus membuat folder baru di folder lib bernama model untuk memisahkannya dengan data yang lain agar lebih mudah diingat tempat menyimpannya. Setelah itu buatlah file .dart baru dengan nama posts.dart,  dan silahkan salin kode di bawah ini.

class Posts {
  int id;
  String title;
  String body;

  Posts({required this.id, required this.title, required this.body});

  factory Posts.fromJson(Map<String, dynamic> json) {
    return Posts(id: json['id'], title: json['title'], body: json['body']);
  }
}

Menambahkan dependency HTTP

Untuk bisa mengakses API, maka kita perlu koneksi internet dan sebuah dependency untuk mengaksesnya. Untuk menambahkan dependency kita bisa menekan shortcut ctrl+shift+p pada keyboard. Ketikkan “Dart: Add Dependency” lalu klik atau enter di menu yang tersedia.

Ketikkan http dan pilih dependency http. Kemudian tekan enter, maka dependency akan langsung ditambahkan di pubspec.yaml.

Membuat DetailPage

Detail Page ini berfungsi untuk menampilkan data suatu Post dari List API. Buatlah folder baru bernama page dan buat file bernama detailPage.dart.  Untuk membuatnya, teman-teman bisa menyalin kode di bawah ini.

import 'package:flutter/material.dart';
import 'package:tutorial_api_json/model/posts.dart';

class DetailPage extends StatelessWidget {
  // DetailPage({Key? key, required Posts posts}) : super(key: key);

  final Posts posts;
  const DetailPage({Key? key, required this.posts}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Detail Page'),
      ),
      body: SafeArea(
          child:
              Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Text(
          'id: ${posts.id}',
        ),
        Text('Title: ${posts.title}'),
        const SizedBox(
          height: 20,
        ),
        const Text('Body: '),
        Text(posts.body)
      ])),
    );
  }
}

Membuat Post Card

Post Card digunakan untuk menampilkan data API dari list dalam bentuk Card. Buatlah file postCard.dart pada folder baru bernama widget dan silahkan copy kode di bawah ini.

import 'package:flutter/material.dart';
import 'package:tutorial_api_json/model/posts.dart';
import 'package:tutorial_api_json/page/detailPage.dart';

class PostCard extends StatelessWidget {
  const PostCard({Key? key, required this.posts}) : super(key: key);
  final Posts posts;

  // const PostCard({required this.posts});
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: ((context) {
              return DetailPage(posts: posts);
            }),
          ),
        );
      },
      child: Container(
        decoration: const BoxDecoration(color: Colors.white),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Text(posts.id.toString()),
            Text(
              posts.title,
              style: const TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            Text(posts.body),
          ],
        ),
      ),
    );
  }
}

Membuat Halaman Home

Halaman ini adalah halaman utama dan akan berisi data list dari API yang kita dapatkan. Untuk membuatnya teman-teman bisa membuat file Home.dart pada folder page, kemudian salin code di bawah ini.

import 'package:flutter/material.dart';
import 'package:tutorial_api_json/model/posts.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';

import 'package:tutorial_api_json/widget/postCard.dart';

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Future<List<Posts>> fetchPosts() async {
    final response =
        await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

    print(response.statusCode);
    print(response.body);

    if (response.statusCode == 200) {
      var getPostsData = json.decode(response.body) as List;
      var listPosts = getPostsData.map((i) => Posts.fromJson(i)).toList();
      return listPosts;
    } else {
      throw Exception('Failed to load Posts');
    }
  }

  late Future<List<Posts>> futurePosts;

  @override
  void initState() {
    futurePosts = fetchPosts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Post List'),
        centerTitle: true,
      ),
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.symmetric(
            horizontal: 20,
          ),
          child: FutureBuilder<List<Posts>>(
              future: futurePosts,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return ListView.separated(
                      itemBuilder: ((context, index) {
                        var post = (snapshot.data as List<Posts>)[index];
                        return Column(
                          children: [
                            PostCard(
                              posts: Posts(
                                  id: post.id,
                                  title: post.title,
                                  body: post.body),
                            ),
                            SizedBox(height: 20)
                          ],
                        );
                      }),
                      separatorBuilder: (context, index) {
                        return const Divider();
                      },
                      itemCount: (snapshot.data as List<Posts>).length);
                } else if (snapshot.hasError) {
                  return Text('${snapshot.error}');
                }
                return const CircularProgressIndicator();
              }),
        ),
      ),
    );
  }
}

Baca Juga : Industri Board Game Dunia Semakin Menggeliat, Kesempatan Bagi Pengembang Board Game Indonesia

Running Aplikasi

Untuk mencoba running aplikasi, teman-teman bisa mengubah main.dart dengan kode seperti di bawah ini.

import 'package:flutter/material.dart';

import 'page/home.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Home());
  }
}

Jika teman-teman mengikuti tutorial ini dengan baik, maka output yang dihasilkan adalah sebagai berikut

Selamat, teman-teman sudah bisa memasukkan API ke aplikasi Flutter.

Sekian tutorial dari saya, sampai jumpa di tutorial berikutnya.

Artikel ini adalah kontribusi dari peserta program Gamelab Indonesia. Isi dari artikel ini tidak mewakili pandangan tim Gamelab Indonesia.