Tutorial Flutter Image Widget Mudah dan Lengkap

Tutorial flutter images widget
Tutorial flutter image widget
Codingtive.com - Image atau gambar merupakan komponen yang penting dalam suatu aplikasi, selain itu gambar juga digunakan untuk memberikan informasi kepada pengguna dan membuat aplikasi menjadi lebih interaktif.

Untuk dapat menampilkan gambar pada Flutter, kamu dapat menggunakan widget "Image". Beberapa format gambar yang support pada JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, dan WBMP.

Pada tutorial ini kamu akan belajar menampilkan gambar dari lokal dan dari internet, siapkan laptop kamu, mulai membuat project baru, dan ikuti langkah-langkahnya sampai selesai.

1. Menyiapkan assets gambar

Pertama, cari gambar sebagai contoh untuk ditampilkan. Buatlah folder baru pada root project dengan nama assets dan folder lagi didalamnya dengan nama images. Kemudian pindahkan gambar ke dalam folder images. Sehingga susunan foldernya menjadi seperti berikut :
Flutter assets folder
Flutter assets folder
Pada folder assets kamu dapat menempatkan assets lainnya seperti icon, suara, video, dan masih banyak lagi. 

2. Mengatur file pubspec.yaml

Untuk dapat diakses assets yang sudah kamu tambahkan, kita perlu mengatur file pubspec.yaml yang berada pada root project. Buka file pubspec.yaml kemudian kamu akan menemukan kode assets yang defaultnya masih diberikan komentar.

Hapus tanda komentar dan tambahkan kode lokasi assets yang diberikan akses, kodenya menjadi seperti berikut :
# To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/
Kode diatas kita sudah menambahkan akses untuk folder assets/images/.

3. Membuat layout

Selanjutnya, buka file main.dart pada folder lib dan ubah semua kodenya menjadi seperti berikut :
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Flutter Images",
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Flutter Images"),
      ),
      body: Container(
        padding: EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            
          ],
        ),
      ),
    );
  }
}
Kita akan menampilkan 2 gambar, pertama gambar yang dari lokal yang sudah ditambahkan, dan yang kedua dari internet. Karena gambar yang akan kita tampilkan dalam bentuk baris, maka menggunakan widget Column.

Nah, sekarang saatnya menampilkan gambar dengan menggunakan widget Image. Berikut perbedaannya :

- Image.asset() : untuk menampilkan gambar dari lokal.
- Image.network() : untuk menampilkan gambar dari internet.

Tambahkan kode berikut didalam children Column, sehingga kodenya menjadi seperti berikut :
child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Image.asset(
      "assets/images/strawberry.jpg",
      width: 380.0,
      height: 160.0,
      fit: BoxFit.cover,
    ),
    Padding(
      padding: EdgeInsets.only(bottom: 20.0),
    ),
    Image.network(
      "https://xam-consulting.com/wp-content/uploads/2019/03/flutter_blog-2-750x400-1.png",
      width: 380.0,
      height: 160.0,
      fit: BoxFit.cover,
    ),
  ],
),
Banyak sekali properties yang dapat kita gunakan untuk mengatur gambar yang ditampilkan, berikut penjelasannya :

- alignment : mengatur posisi gambar
- width : mengatur ukuran lebar gambar
- height : mengatur ukuran tinggi gambar
- semanticLabel : menambahkan deskripsi gambar
- fit : mengatur gambar terhadap ruang / space yang tersedia.
- filterQuality : mengatur kualitas gambar yang ditampilkan

Untuk mempelajari lebih dalam mengenai widget Image, kamu dapat membukanya di Flutter image class.

Sekarang coba jalankan dengan emulator, hasilnya seperti berikut :
tutorial flutter images widget
tutorial flutter image widget

Full source code main.dart

Untuk full kode pada file main.dart seperti berikut :
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Flutter Images",
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Flutter Images"),
      ),
      body: Container(
        padding: EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset(
              "assets/images/strawberry.jpg",
              width: 380.0,
              height: 160.0,
              fit: BoxFit.cover,
            ),
            Padding(
              padding: EdgeInsets.only(bottom: 20.0),
            ),
            Image.network(
              "https://xam-consulting.com/wp-content/uploads/2019/03/flutter_blog-2-750x400-1.png",
              width: 380.0,
              height: 160.0,
              fit: BoxFit.cover,
            ),
          ],
        ),
      ),
    );
  }
}
Atau kamu dapat mempelajarinya di repository github :

Kesimpulan

Sekarang kamu sudah belajar cara menampilkan gambar dari lokal dan internet menggunakan widget Image. Kamu dapat explore lebih banyak lagi dan menerapkannya pada latihan berikutnya.

Selanjutnya untuk meningkatkan kemampuan kamu, pelajari juga artikel berikut :

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter Image Widget Mudah dan Lengkap"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel