Halo guys, Berjumpa dengan Miniblog dari Inzaghi's Blog! Kali ini kita akan membuat Program untuk memasukkan dan menampilkan sebuah Gambar menggunakan Flutter.
Sumber : Geeksforgeeks.org, Javatpoint.com, dan juga menggunakan ChatGPT
Berikut ini adalah Langkah-langkah menambahkan Gambar dalam Flutter :
Langkah 1 : Buat Folder Baru
- Itu harus berada di root proyek Flutter Anda. Anda dapat memberi nama apa pun, tetapi penggunaan "assets" lebih disukai.
- Jika Anda ingin menambahkan aset lain ke aplikasi Anda, seperti font, lebih disarankan membuat subfolder lain dengan nama "images".
Langkah 2 : Sekarang Anda dapat menyalin gambar Anda ke subfolder "images". Jalurnya seharusnya terlihat seperti "assets/images/namaGambar". Sebelum menambahkan gambar, pastikan juga memeriksa format gambar yang didukung seperti yang disebutkan di atas.
Langkah 3 : Daftarkan folder aset di file pubspec.yaml dan perbarui file tersebut.
Untuk menambahkan gambar, tulis kode berikut :
flutter:assets:- assets/images/yourFirstImage.jpg- assets/image/yourSecondImage.jpg
Jika Anda ingin memasukkan semua gambar folder aset, tambahkan ini :
flutter:assets:- assets/images/
Langkah 4 : Masukkan kode gambar ke dalam file tempat Anda ingin menambahkan gambar.
assets:- assets/images/inzaghis-blog-logo-vertical-transparent.png
Contoh :
import 'package:flutter/material.dart';void main() {runApp(MyApp());}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Insert Image Demo'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text("Inzaghi's Blog Logo :",style: TextStyle(fontSize: 16),),SizedBox(height: 20),Image.asset('../assets/images/inzaghis-blog-logo-vertical-transparent.png', // Replace with your image file namewidth: 200,height: 80,fit: BoxFit.cover, // You can use other BoxFit values as needed),],),),),);}}
Output :
Untuk melihat Project ini di Web, silakan lihat di sini :
https://zapp.run/edit/flutter-zy4m06ejy4n0?entry=lib/main.dart&file=lib/main.dart
Mohon maaf apabila ada kesalahan sedikitpun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)