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>:
- Ubah isi respons menjadi JSON
Mapdengandart:convertpaket. - Jika server mengembalikan respons OK dengan kode status 200, maka ubah JSON
MapmenjadiAlbummenggunakanfromJson()metode pabrik. - 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 disnapshot, 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:
- Yang
Futureingin Anda ajak kerja sama. Dalam hal ini, masa depan kembali darifetchAlbum()fungsi tersebut. - Sebuah
builderfungsi yang memberitahu Flutter apa untuk membuat, tergantung pada keadaanFuture: 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
Hasil
"teknik informatika universitas bina darma palembang"
