Mengambil Data dari website dengan HTTP GET di Flutter

Permintaan GET digunakan untuk mengekstrak data dari backend untuk digunakan dalam aplikasi. Untuk melakukan permintaan GET dari website dengan Flutter, berikut ini langkahnya.

Dapatkan paket dart HTTP

Bukan terminal baru lalu ketikkan flutter pub add http.

Tambahkan izin mengakses internet di AndroidManifest.xml

Kita harus menambahkan izin mengakses internet di AndroidManifest.xml. File ini ada di dalam folder android > app > main > AndroidManifest.xml.
Lalu tambahkan kode di bawah ini di bawah tag <manifest> tetapi sebelum tag <application>

<uses-permission android:name="android.permission.INTERNET" />

Berikut ini adalah data yang akan kita ambil dari server. Salah satu website yang menyediakan data ini secara acak dan gratis yaitu https://jsonplaceholder.typicode.com/. Salah satu data yang dapat diambil adalah photo sehingga url berubah menjadi https://jsonplaceholder.typicode.com/posts .

Kita akan mulai dari kode yang sederhana terlebih dahulu dan berikut ini implementasi kodenya:

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

void main() async {
  List posts = [];

  try {
    const apiUrl = 'https://jsonplaceholder.typicode.com/posts';

    final http.Response response = await http.get(Uri.parse(apiUrl));
    posts = json.decode(response.body);

    posts.forEach((element) => print("tile:" + element['title']));
  } catch (err) {
    if (kDebugMode) {
      print(err);
    }
  }
}

Kita dapat melihat disini data posts diambil dari website jsonplaceholder.typicode.com. Data yang diambil dengan http get berupa teks. Data teks ini perlu dikonversi ke bentuk JSON agar memudahkan proses pembacaan dan disimpan dalam variabel posts. Lalu dengan menggunakan perulangan kita baca data posts dan mencetak isi title saja. Karena yang dicetak hanya title saja, kita perlu mengambilnya dengan menyebutkan nama kolom seperti element[‘title’]. Hasilnya akan tercetak di terminal seperti gambar dibawah.

Membuat Antarmuka Untuk Menampilkan Data

Berikut ini kita akan menampilkan title dan body dari data post ke dalam list.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: PartHome(),
    );
  }
}

class PartHome extends StatefulWidget {
  const PartHome({super.key});

  @override
  State<PartHome> createState() => PartHomeState();
}

class PartHomeState extends State<PartHome> {
  Future<List> ambilData() async {
    List posts = [];
    try {
      const apiUrl = 'https://jsonplaceholder.typicode.com/posts/';

      final http.Response response = await http.get(Uri.parse(apiUrl));
      posts = json.decode(response.body);
    } catch (err) {
      if (kDebugMode) {
        print(err);
      }
    }

    return posts;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GET DATA FROM WEBSITE"),
      ),
      body: Column(children: [
        Expanded(
          child: FutureBuilder(
              future: ambilData(),
              builder: (BuildContext ctx, AsyncSnapshot<List> snapshot) =>
                  snapshot.hasData
                      ? ListView.builder(
                          // render the list
                          itemCount: snapshot.data!.length,
                          scrollDirection: Axis.vertical,
                          itemBuilder: (BuildContext context, index) => Column(
                                children: [
                                  Text(snapshot.data![index]['title']),
                                  Text(snapshot.data![index]['body'])
                                ],
                              ))
                      : const Center(
                          // render the loading indicator
                          child: Text("NOT FOUND"))),
        ),
      ]),
    );
  }
}

Output:

Terlihat title dan body ditampilkan dalam list vertical. Tetapi tampilan masih sedikit kurang rapi, mari kita menambahkan card dan padding untuk merapikan tampilan.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: PartHome(),
    );
  }
}

class PartHome extends StatefulWidget {
  const PartHome({super.key});

  @override
  State<PartHome> createState() => PartHomeState();
}

class PartHomeState extends State<PartHome> {
  Future<List> ambilData() async {
    List posts = [];
    try {
      const apiUrl = 'https://jsonplaceholder.typicode.com/posts/';

      final http.Response response = await http.get(Uri.parse(apiUrl));
      posts = json.decode(response.body);
    } catch (err) {
      if (kDebugMode) {
        print(err);
      }
    }

    return posts;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GET DATA FROM WEBSITE"),
      ),
      body: Column(children: [
        Expanded(
          child: FutureBuilder(
              future: ambilData(),
              builder: (BuildContext ctx, AsyncSnapshot<List> snapshot) =>
                  snapshot.hasData
                      ? ListView.builder(
                          itemCount: snapshot.data!.length,
                          scrollDirection: Axis.vertical,
                          itemBuilder: (BuildContext context, index) => Column(
                                children: [
                                  Padding(
                                      padding: const EdgeInsets.all(7),
                                      child: Card(
                                          elevation: 10,
                                          child: Padding(
                                            padding: const EdgeInsets.all(7),
                                            child: Column(
                                              children: [
                                                Align(
                                                  alignment: Alignment.topLeft,
                                                  child: Text(
                                                      snapshot.data![index]
                                                          ['title'],
                                                      style: const TextStyle(
                                                        fontSize: 20,
                                                        fontWeight:
                                                            FontWeight.w700,
                                                      )),
                                                ),
                                                Align(
                                                  alignment: Alignment.topLeft,
                                                  child: Text(
                                                      snapshot.data![index]
                                                          ['body'],
                                                      style: const TextStyle(
                                                        fontSize: 14,
                                                        fontWeight:
                                                            FontWeight.w300,
                                                      )),
                                                )
                                              ],
                                            ),
                                          )))
                                ],
                              ))
                      : const Center(child: Text("NOT FOUND"))),
        ),
      ]),
    );
  }
}

Output: