MitraIde

News

Cari Di Situs Ini

Rabu, 20 Maret 2024

Menampilkan Image di Flutter

Hai selamat pagi, kali ini saya akan berbagi pengalaman saya untuk menampilkan gambar di Flutter, sebenarnya cara ini sederhana, namun karena saya masih baru belajar. saya harus mencoba berjam-jam untuk bisa menampilkan gambar di flutter,


Sebelumnya beberapa kali saya gagal menampilkan gambar, dan hanya menampilkan pesan error :

Unable to load assets : "assets/aimage.png" 

The asset does not exist or has empty data.


seperti ini :




Code programnya adalah seperti berikut :

halaman1.dart

import 'package:flutter/material.dart';

class Halaman1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Halaman 1'),
backgroundColor: Colors.blue,
),
body: Center(
child: Image.asset('assets/image.png'),
),
);
}
}


NB : Abaikan penamaan "image.png" dan "aimage.png" itu hanya untuk memudahkan screenshoot dokumentasi.

saya sudah melakukan "flutter pub get" namun masih tetap tidak bisa muncul.

ternyata kendalanya perhatikan kotak merah ini :



Perhatikan pada kotak yang besar, di bawah garis merah. itulah penyebabnya, karena seharusnya ada tab, seperti berikut :

(Harus sejajar dengan "uses-material-design: true")


setelah itu, jangan lupa lakukan , lalu reload aplikasi flutter kita

flutter pub get


dan hasilnya adalah :


Hore sudah berhasil,