Cara memasukkan Gambar menggunakan Flutter

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 {
  @override
  Widget 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 name
                width: 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 😀😊😘👌👍 :)