Tutorial Fetch Data dari Internet di Flutter

 Mengambil data dari internet diperlukan untuk sebagian besar aplikasi. Untungnya, Dart dan Flutter menyediakan alat, seperti paket http, untuk jenis pekerjaan ini.

Langkah-langkahnya sebagai berikut :

1. Tambahkan httppaket

The httppaket menyediakan cara paling sederhana untuk mengambil data dari internet.

Untuk menginstal httppaket, tambahkan ke bagian dependensi pubspec.yamlfile. Anda dapat menemukan versi terbaru dari httppaket pub.dev.

dependencies:
  http: <latest_version>

Impor paket http.

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

Selain itu, di file AndroidManifest.xml Anda, tambahkan izin Internet.

<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />

2. Buat permintaan jaringan

Resep ini membahas cara mengambil album sampel dari JSONPlaceholder menggunakan http.get()metode tersebut.

Future<http.Response> fetchAlbum() {
  return http.get(Uri.https('jsonplaceholder.typicode.com', 'albums/1'));
}

The http.get()Metode mengembalikan Futureyang berisi Response.

• Futureadalah kelas Dart inti untuk bekerja dengan operasi asinkron. Objek Future mewakili nilai potensial atau kesalahan yang akan tersedia di masa mendatang.
• The http.Responsekelas berisi data yang diterima dari panggilan http sukses.

3. Ubah respons menjadi objek Dart kustom

Meskipun mudah untuk membuat permintaan jaringan, bekerja dengan raw Future<http.Response>sangatlah tidak nyaman. Untuk membuat hidup Anda lebih mudah, ubah http.Responsemenjadi objek Dart.

Buat Albumkelas

Pertama, buat Albumkelas yang berisi data dari permintaan jaringan. Ini termasuk konstruktor pabrik yang membuat Albumdari JSON.

Mengonversi JSON dengan tangan hanyalah salah satu opsi. Untuk informasi lebih lanjut, lihat artikel lengkap tentang JSON dan serialisasi .

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'],
    );
  }
}

Ubah http.ResponsemenjadiAlbum

Sekarang, gunakan langkah-langkah berikut untuk memperbarui fetchAlbum() fungsi untuk mengembalikan Future<Album>:

1. Ubah isi respons menjadi JSON Mapdengan dart:convertpaket.
2. Jika server mengembalikan respons OK dengan kode status 200, maka ubah JSON Mapmenjadi Album menggunakan fromJson()metode pabrik.
3. Jika server tidak mengembalikan respons OK dengan kode status 200, lemparkan pengecualian. (Bahkan dalam kasus respons server "404 Not Found", berikan pengecualian. Jangan kembali null. Ini penting saat memeriksa data di snapshot, seperti yang ditunjukkan di bawah ini.)

import 'dart:convert';

Future<Album> fetchAlbum() async {
  final response = await http.get(Uri.https('jsonplaceholder.typicode.com', 'albums/1'));

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    return Album.fromJson(jsonDecode(response.body));
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load album');
  }
}

Hore! Sekarang Anda memiliki fungsi yang mengambil album dari internet.

4. Ambil data

Panggil fetchAlbum()metode di salah satu metode initState()atau didChangeDependencies().

The initState()metode ini disebut persis sekali dan kemudian tidak pernah lagi. Jika Anda ingin memiliki opsi untuk memuat ulang API sebagai respons terhadap InheritedWidgetperubahan, masukkan panggilan ke dalam didChangeDependencies()metode. Lihat Stateuntuk lebih jelasnya.

class _MyAppState extends State<MyApp> {
  late Future<Album> futureAlbum;

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

Masa Depan ini digunakan di langkah berikutnya.

5. Menampilkan data

Untuk menampilkan data di layar, gunakan FutureBuilderwidget. The FutureBuilderwidget dilengkapi dengan Flutter dan membuatnya mudah untuk bekerja dengan sumber data asynchronous.

Anda harus memberikan dua parameter:

1. Yang Futureingin Anda ajak kerja sama. Dalam hal ini, masa depan kembali dari fetchAlbum()fungsi tersebut.
2. Sebuah builderfungsi yang memberitahu Flutter apa untuk membuat, tergantung pada keadaan Future: pemuatan, sukses, atau kesalahan.

Perhatikan bahwa snapshot.hasDatahanya ditampilkan true jika snapshot berisi nilai data bukan null.

Karena fetchAlbumhanya dapat mengembalikan nilai bukan null, fungsi tersebut harus mengeluarkan pengecualian bahkan dalam kasus respons server "404 Not Found". Melemparkan pengecualian set yang snapshot.hasErroruntuk true yang dapat digunakan untuk menampilkan pesan kesalahan.

Jika tidak, spinner akan ditampilkan.

FutureBuilder<Album>(
  future: futureAlbum,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!.title);
    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }

    // By default, show a loading spinner.
    return CircularProgressIndicator();
  },
);

Mengapa fetchAlbum () dipanggil initState ()?

Meskipun nyaman, tidak disarankan untuk melakukan panggilan API dalam suatu build()metode.

Flutter memanggil build()metode setiap kali perlu mengubah apa pun dalam tampilan, dan ini sering terjadi secara mengejutkan. Meninggalkan fetchpanggilan dalam build()metode Anda akan membanjiri API dengan panggilan yang tidak perlu dan memperlambat aplikasi Anda.

Menguji

Coding Lengkap

import 'package:flutter/material.dart';

import 'dart:async';

import 'dart:convert';

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

import 'models/Album.dart';

Future<Album> fetchAlbum() async {

final response =

await http.get(Uri.https('jsonplaceholder.typicode.com', 'albums/1'));

if (response.statusCode == 200) {

// If the server did return a 200 OK response,

// then parse the JSON.

return Album.fromJson(jsonDecode(response.body));

} else {

// If the server did not return a 200 OK response,

// then throw an exception.

throw Exception('Failed to load album');

}

}

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

class MyApp extends StatefulWidget {

MyApp({Key key}) : super(key: key);

@override

_MyAppState createState() => _MyAppState();

}

class _MyAppState extends State<MyApp> {

Future<Album> futureAlbum;

@override

void initState() {

super.initState();

futureAlbum = fetchAlbum();

}

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Fetch Data Example',

theme: ThemeData(

primarySwatch: Colors.blue,

),

home: Scaffold(

appBar: AppBar(

title: Text('Anugerah_IF6MB_Tugas 6 --> Fetch Data Example'),

),

body: Center(

child: FutureBuilder<Album>(

future: futureAlbum,

builder: (context, snapshot) {

if (snapshot.hasData) {

return Text(snapshot.data.title);

} else if (snapshot.hasError) {

return Text("${snapshot.error}");

}

//By default, show a loading spinner,

return CircularProgressIndicator();

}),

)));

}

}

Hasil

"teknik informatika universitas bina darma palembang"