Get Data dari Internet di Flutter

Di dunia saat ini, kebanyakan aplikasi sangat bergantung pada pengambilan data dari server melalui internet. Dalam Flutter, layanan seperti itu disediakan oleh paket http.

Mengimport Paket http

Pertama, tambahkan paket http ke dalam file pubspec.yaml seperti dibawah ini

Setelah menambahkan http di pubspec.yaml lalu ketikkan command “flutter pub get” pada terminal agar flutter menginstal dependency paket yang telah ditambahkan pada pubspec.yaml ke dalam aplikasi.

flutter pub get

Setelah menambahkan paket di pubspec.yaml, selanjutnya import dependency http di file dart yang akan menggunakan http dengan kode sebagai berikut.

import 'package:http/http.dart' as http;

Mengambil Data Dari Internet

Kita dapat menggunakan fungsi http.get untuk mengambil data album contoh dari JSONPlaceholder seperti yang ditunjukkan di bawah ini:

Future fetchAlbum() {
  return http.get('https://jsonplaceholder.typicode.com/albums/2');
}

Konversi Data Response

Konversikan data response dari response.body menjadi object Dart, sehingga data response dari internet dapat diolah dengan mudah. Untuk itu buatlah satu class Album yang bisa menampung data response dan satu fungsi fromJson yang dapat secara otomatis mengambil semua data response:

class Album {
  final int userId;
  final int id;
  final String title;

  Album({required this.userId, required this.id, required this.title});

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

Tampilkan Data

Sekarang, ikuti langkah-langkah di bawah ini untuk memperbarui fungsi fetchAlbum agar mengembalikan object Future<Album>:

Gunakan paket dart:convert untuk mengonversi isi body respons menjadi Map JSON.
Gunakan fungsi fromJSON() untuk mengonversi Map JSON menjadi object Album.

Future fetchAlbum() async {
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/2'));

  if (response.statusCode == 200) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load album');
  }
}

Gunakan fungsi di atas untuk mengambil data seperti yang ditunjukkan di bawah ini:

class _MyAppState extends State {
  late Future futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbum();
  }

Menampilkan Data

Gunakan widget FutureBuilder untuk menampilkan data pada layar seperti yang ditunjukkan di bawah ini:

FutureBuilder(
            future: futureAlbum,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Container(
                  padding: const EdgeInsets.all(12),
                  width: 150,
                  height: 150,
                  decoration: BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.circular(18),
                  ),
                  child: Center(
                    child: Text(
                      snapshot.data!.title,
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 24,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                );
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }
              return const CircularProgressIndicator();
            },
          ),

Berikut ini adalah source code lengkap setelah mengikuti langkah-langkah di atas.

import 'dart:async';
import 'dart:convert';

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

Future fetchAlbum() async {
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/2'));

//Pengondisian yang digunakan untuk mengambil tindakan yang tepat
//berdasarkan pada respons dari server.
  if (response.statusCode == 200) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load album');
  }
}

class Album {
  final int userId;
  final int id;
  final String title;

  Album({required this.userId, required this.id, required this.title});

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

void main() => runApp(const MyApp());

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

  @override
  State createState() => _MyAppState();
}

class _MyAppState extends State {
  late Future futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbum();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetching Data',
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Nextgen Tutorial'),
        ),
        body: Center(
          child: FutureBuilder(
            future: futureAlbum,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Container(
                  padding: const EdgeInsets.all(12),
                  width: 150,
                  height: 150,
                  decoration: BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.circular(18),
                  ),
                  child: Center(
                    child: Text(
                      snapshot.data!.title,
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 24,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                );
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }
              return const CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

Tutorial sebelumnya : Update Data Di Internet
Tutorial setelahnya : Delete Data Di Flutter
Semua Tutorial Flutter : Tutorial Flutter

Mengimport Paket http

Mengambil Data Dari Internet

Konversi Data Response

Tampilkan Data

Menampilkan Data

Tinggalkan Balasan