Flutter: Menampilkan Gambar dari Internet yang Rapi
📱 Flutter: Menampilkan Gambar dengan Aspect Ratio dan Ukuran Kecil
Dalam membuat aplikasi Flutter, kita sering ingin menampilkan gambar agar tampil proporsional, tidak terlalu besar, dan tetap rapi di berbagai ukuran layar. Nah, di artikel ini kita akan belajar cara menampilkan gambar dari internet dengan tampilan yang lebih clean dan profesional.
✨ Apa yang Kita Lakukan?
- Menampilkan gambar dari URL menggunakan
Image.network. - Membuat gambar tampil dengan ukuran kecil menggunakan
SizedBox. - Menjaga proporsi gambar tetap 4:3 menggunakan
AspectRatio. - Menambahkan border radius agar sudut gambar melengkung.
- Menangani kondisi saat loading dan saat gambar gagal dimuat.
Preview
🧪 Kode Lengkapnya
Berikut ini adalah kode Flutter lengkap yang bisa kamu salin dan jalankan langsung di project Flutter kamu:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image Aspect Ratio Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ImageAspectRatioPage(),
debugShowCheckedModeBanner: false,
);
}
}
class ImageAspectRatioPage extends StatelessWidget {
final List names = ['Kevin', 'Zaky'];
void _showNamesPopup(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Daftar Nama'),
content: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: names.map((name) => ListTile(
title: Text(name),
leading: Icon(Icons.person),
)).toList(),
),
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Tutup'),
),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Yey ada gambar'),
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Ini orang",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 12),
SizedBox(
width: 300,
child: AspectRatio(
aspectRatio: 4 / 3,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.network(
'https://images.unsplash.com/photo-1753926519307-710528876ef9?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
fit: BoxFit.cover,
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Container(
color: Colors.grey[200],
child: Center(
child: CircularProgressIndicator(),
),
);
},
errorBuilder: (context, error, stackTrace) {
return Container(
color: Colors.grey[300],
child: Center(
child: Icon(
Icons.error_outline,
color: Colors.red,
size: 48,
),
),
);
},
),
),
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () => _showNamesPopup(context),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
),
child: Text('Tampilkan Nama'),
),
],
),
),
),
);
}
}
🎯 Penjelasan Komponen Kunci
- SizedBox(width: 300) → Mengatur lebar gambar agar tidak memenuhi layar.
- AspectRatio(4 / 3) → Menjaga proporsi gambar (lebar banding tinggi = 4:3).
- ClipRRect → Membuat sudut gambar melengkung (radius 12px).
- Image.network → Menampilkan gambar dari URL, dengan loading dan error handling.
💡 Tips
Kamu juga bisa membuat gambar lebih responsive dengan mengganti:
SizedBox(width: 300)menjadi:
SizedBox(width: MediaQuery.of(context).size.width * 0.6)Agar ukuran gambar menyesuaikan lebar layar pengguna.
✅ Penutup
Dengan kode ini, kamu bisa membuat gambar yang tampil cantik dan responsif di aplikasi Flutter kamu. Gak perlu ribet atur ukuran manual satu-satu — cukup pakai kombinasi AspectRatio dan SizedBox.
Semoga membantu! 🚀
Komentar
Posting Komentar