Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar bagaimana cara mengambil dan menampilkan data dari internet di flutter. Penasaran, ayo baca selengkapnya di bawah ini.
Pada tutorial kita kali ini kita akan belajar beberapa hal di flutter
2. Menggunakan Package Http untuk mengambil data dari internet
3. Menggunakan Future Builder
4. Menggunakan GridView Builder
5. Menggunakan model
Cara Mengambil dan Menampilkan Data di Flutter
1. Pertama buatlah sebuah project flutter baru dengan menekan tombol CTRL + SHIFT + P secara bersamaan. Lalu pilih new project → Application → pilih lokasi penyimpanan project → kemudian isi nama project.
2. Buatlah sebuah file baru di dalam folder lib dengan nama product.dart. Lalu copy script di bawah ini.
class Product {
final int id;
final String title;
final double price;
final double discountPercentage;
final double rating;
final int stock;
final String brand;
final String category;
final String thumbnail;
Product({
required this.id,
required this.title,
required this.price,
required this.discountPercentage,
required this.rating,
required this.stock,
required this.brand,
required this.category,
required this.thumbnail,
});
factory Product.fromJson(Map<String, dynamic> json) {
return Product(
id: json['id'],
title: json['title'],
price: json['price'].toDouble(),
discountPercentage: json['discountPercentage'].toDouble(),
rating: json['rating'].toDouble(),
stock: json['stock'],
brand: json['brand'],
category: json['category'],
thumbnail: json['thumbnail'],
);
}
}3. Buka file main.dart di dalam folder lib lalu ganti dengan script di bawah ini. Penjelasan sudah saya sertakan di dalam script
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'product.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
Future<List<Product>> fetchProducts() async {
final response = await http.get(Uri.parse('https://dummyjson.com/products'));
// Membuat request HTTP GET ke URL yang diberikan
if (response.statusCode == 200) {
// Mengecek apakah respons berhasil dengan status code 200 (OK)
final List<dynamic> productsJson = json.decode(response.body)['products'];
// Mendapatkan array JSON dari body respons dan mengkonversinya menjadi daftar objek Product
return productsJson.map((json) => Product.fromJson(json)).toList();
} else {
// Jika respons tidak berhasil, lemparkan Exception dengan pesan kesalahan
throw Exception('Failed to load products');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Product Page'),
),
body: FutureBuilder<List<Product>>(
future: fetchProducts(),
builder: (context, snapshot) {
// Mengecek status snapshot
if (snapshot.hasData) {
// Jika data tersedia, kita mendapatkan daftar produk dari snapshot
final List<Product> products = snapshot.data!;
// Membangun GridView untuk menampilkan produk
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.6,
),
itemCount: products.length,
itemBuilder: (context, index) {
// Mendapatkan produk pada indeks tertentu
final product = products[index];
// Mengembalikan widget Card yang berisi informasi produk
return Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Menampilkan thumbnail produk dengan menggunakan Image.network
Container(
height: 150,
width: MediaQuery.of(context).size.width,
child: Image.network(
product.thumbnail,
fit: BoxFit.cover,
),
),
// Menampilkan informasi produk seperti judul, kategori, brand, harga, dan rating
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
product.title,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 4),
Text(
product.category,
style: TextStyle(
fontSize: 8,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 4),
Text(
product.brand,
style: TextStyle(
fontSize: 8,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 4),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'\$${product.price.toStringAsFixed(2)}',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.green,
),
),
Text(
'Rating: '+product.rating.toStringAsFixed(2),
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
),
],
),
);
},
);
} else if (snapshot.hasError) {
// Jika terjadi kesalahan, menampilkan pesan kesalahan di tengah layar
return Center(
child: Text("${snapshot.error}"),
);
}
// Jika masih dalam proses memuat data, tampilkan indikator loading di tengah layar
return Center(
child: CircularProgressIndicator(),
);
},
),
);
}
}Ok, sekarang jalankan project kalian di emulator. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini. Terdapat gambar, judul produk, kategori produk, brand, harga dan rating produk.
 |
| Tampilan Akhir Aplikasi |
Sekarang kalian sudah belajar beberapa fungsi, package dan fitur yang ada di flutter. Latihan ini bisa kalian kembangkan lagi agar aplikasi flutter kalian lebih baik. Kalian bisa menambahkan model MVC atau menggunakan state management. Baca juga beberapa artikel terkait flutter yang saya siapkan di bawah ini.
| Baca Artikel Lain ✨ |
| 📰 1. Cara Paling Mudah Membuat Login Google di Flutter read more |
| 📰 2. CRUD Flutter + PHP + MySQL Part 2, Membuat Mobile App read more |
|
📰 3. Membuat Aplikasi CRUD dengan Flutter dan SQFlite read more |
Sekian tutorial flutter kita kali ini tentang cara menampilkan data dari internet di flutter. Semoga tulisan ini bermanfaat. Jika ada pertnyaan silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima gaji.
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi