ISALLAB.COM – Halo teman-teman, di postingan kali ini saya akan membahas seputar tentang Flutter Widget. Dan sebelum kamu belajar Flutter saya saranin kamu belajar bahasa pemrograman Basic nya dahulu, sebab agar lebih mudah untuk belajar selanjutnya. Untuk linknya silahkan kamu ikuti link di bawah ini. Lengkap !

• Widget Image

Widget Image adalah Widget yang digunakan untuk menampilkan gambar. Dalam Flutter  widget ini menjadi salah satu yang wajib diketahui cara penggunaannya, sebab dengannya memungkinkan kita untuk menampilkan gambar pada aplikasi yang sedang di-develop menggunakan Flutter. Ada dua cara dalam menampilkan image menggunakan Flutter, pertama adalah dengan mengambilnya langsung dari internet (Online) dan yang kedua adalah secara internal dengan menyimpan file-nya di dalam project Flutter kita.

Berikut caranya  :

1. Kita buat Projectnya lalu buat judul dari Appbarnya seperti dibawah :

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Latihan Image Widget"),
        ),
  }
}

2. Lalu kita tambah Widget Center untuk membuat gambar di tengah, dan kita menambahkan Container untuk menambah background dari image kita, lalu childnya di tambah widget Image di lankah selanjutnya

body: Center(
          child: Container(
            color: Colors.amber,
            width: 200,
            height: 200,
            padding: EdgeInsets.all(3),
            child: ...
      ),
    );

3. Lalu disini kita tambahkan widget Image tersebut nah di dalam image terbagi dua yaitu Online = NetworkImage dan Offline = AssetImage berikut contohnya:

a. NetworkImage

Image(
  image: 
        NetworkImage(
        "https://c4.wallpaperflare.com/wallpaper/246/739/689/digital-digital-art-artwork-illustration-abstract-hd-wallpaper-preview.jpg"),
        fit: BoxFit.contain, repeat: ImageRepeat.repeat,
),

b. AssetImage

Image(
  image: 
        AssetImage("assets/logo-desc.png"), // jangan lupa buat folder assests dan masukkan kedalan pubscpec.yaml
        fit: BoxFit.contain, repeat: ImageRepeat.repeat,
),

Untuk AssetImage kita harus menambah keterangan atau tambah code di pubspec.yaml

assets:
    - assets/

Selesaii

Full code nya bisa lihat di github ini !!!

Sampai disini tutorial Flutter Widget – Widget Image (Online Image & Offline Image) ,  ikuti terus website ini untuk mendapatkan tutorial dan artikel menarik lainya. Semoga bermanfaat, jangan lupa berkomentar dan bagikan artikel ini jika menurut kamu berguna. 🙂