Flutter Basic Images and Icons

Membuat design User Interface yang bagus dang menarik pada aplikasi Flutter Anda dengan menampilkan beragam gambar dan icon? Anda tidak perlu masalah dengan implementasinya, di Flutter semuat tersebut di dukung secara penuh oleh Flutter SDK.

Pada artikel kali ini Saya akan bahas beberapa tentang Images(Gambar) dan Icons yang secara default sudah di sediakan oleh Flutter SDK. Berikut beberapa penjelasan-penjelasnya:

Images #

Ketika membuat App/aplikasi pasti ada kalanya kita perlu menampilkan sebuah gambar dari berbagai sumber yang ingin kita tampilkan kepada user aplikasi kita. Pada Flutter untuk menampilkan gambar kita dapat menampilkan dari berbagai sumber: assets, network, file, dan memory.

Pada Flutter sudah tersedia Widget yang dapat/bisa menampilkan gambar dari berbagai sumber yaitu bernama Image , widget Image perlu ImageProvider sebagai object yang menentukan gambar tersebut berasal dari mana ex: asset, network.

Di flutter SDK ekstensi gambar yang sudah didukung tanpa library tambahan yaitu: JPG, PNG, WEBP, JPEG, GIF, BMP, dan WBMP.

Berikut contoh dan penjelasan dari beberapa sumber render image di flutter:

Image Assets #

Dimana pada sumber ini kita dapat menampilkan data gambar yang ada pada aplikasi kita yang sebelumnya kita sudah dafatarkan terlebih dahulu pada pubspec.yaml. Pada Image asset ini cocok sekali jika Anda ingin menampilkan data secara private(hanya di bisa ditampilkan di aplikasi Anda). Misal jika ingin menampilkan gambar logo pada aplikasi Anda, tapi inginnya aplikasi tersebut bisa berjalan secara offline.

Image assets ini menggunakan class AssetImage sebagai provider image yang berasal/dari turunan class ImageProvider. Pada Flutter jika implementasi Image yang berasal dari assets, Anda perlu gunakan widget Image dengan factory assets. Secara default pada Flutter jika menampilkan gambar dari assets akan otomatis di atur oleh Flutter tentang pixel density untuk resolusi gambar.

Terus gimana cara implementasinya?

1. Pertama Anda wajib daftarkan lokasi assets gambar Anda di pubspec.yaml

   Daftarkan lokasi asset pada pubspec.yaml dengan posisi yang tepat, lokasi assets property berada dalam child flutter property di pubspec, more info. Berikut contohnya:

   1 2 3 4

   flutter: assets: - assets/my_icon.png - assets/background.png

   Atau juga bisa lebih simpel mendeklarasikan asset di pubspec hanya nama foldernya saja, contoh:

   1 2 3

   flutter: assets: - assets/

   Perlu diperhatikan ketika menggunakan folder wajib gunakan tanda garis miring (/) diakhir nama folder

2. Implement code

   1 2 3 4 5 6 7

   Image.asset('assets/my_icon.png'); // Or Image( image: AssetImage('assets/my_icon.png'), );

   Dimana assets/my_icon.png tersebut adalah posisi/lokasi file assets gambar pada project Anda.

Image Network #

Jika Anda mempunyai aplikasi yang ingin menampilkan data gambar yang dynamic, Anda cocok sekali gunakan metode ini, selain lebih scalable ImageNetwork ini bisa lebih hemat resource yang membuat ukuran aplikasi kita jadi lebih besar.

Dan di Flutter ketika render widget gambar yang berasal dari network/jaringan secara default disimpan di cache, untuk meningkatkan performa rendering berikutnya. Widget image network ini menggunakan class NetworkImage sebagai provider image yang berasal/dari turunan class ImageProvider. Anda dapat menampilkan gambar dari internet dengan widget Image saja, ataupun dari fatory nya Image yaitu Image.network supaya lebih simple. Untuk menampilkan gambar dari internet kita perlu/butuh url gambar yang valid. Berikut contohnya:

1
2
3
4
5
6
7

Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg');

// OR

Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
);

Image File #

Pada metode ini Anda dapat menampilkan gambar dari storage/penyimpanan di device, Misal jika user ingin menampilkan foto dari galeri, maupun external storage.

Jika Anda menggunakan/menampilkan gambar di internal/external storage yang status lokasi gambarnya tersebut di luar posisi instalasi aplikasi, maka pada Android Anda perlu menambahkan permission/izin untuk akses file tersebut. Untuk permissionnya yaitu: android.permission.READ_EXTERNAL_STORAGE.

Widget image network ini menggunakan class FileImage sebagai provider image yang berasal/dari turunan class ImageProvider. Anda dapat menampilkan gambar dari file dengan widget Image saja, ataupun dari fatory nya Image yaitu Image.file supaya lebih simple. Berikut contoh implementnya:

1
2
3
4
5
6
7

Image.file(File('/paht/your/file/image.png'));

// OR

Image(
   image: FileImage(File('/paht/your/file/image.png')),
);

Image Memory #

Pada metode ini memungkinkan Anda menampilkan gambar dari byte. Untuk bisa menampilkan gambar dari memory Anda perlu mengubah type data Anda ke dalam Unit8List sebagai parameter data image.

Note: saat ini Flutter untuk menampilkan gambar dari byte (binary) hanya dari compress dengan format PNG saja.

Contoh:

1

Image.memory(YOUR_BYTE_IMAGE);

Image Properties #

Terdapat beberapa parameter properties yang dapat Anda mengkustom Widget gambar Anda. Berikut penjelasnya:

Icons #

Icons pada Flutter berbasis font, mirip seperti beberapa font icon yang terdapat pada Web misalnya: FontAwesome, MaterialIcons, dll. Pada Flutter icon di render dengan glyph dari class IconData. Pada Flutter sudah terdapat beberapa font icon yang sudah diterapkan ketika kita membuat project starter dari flutter. Untuk menampilkan icon di Flutter kita dapat menggunakan Widget Icon dengan parameter IconData sebagai resource font iconnya. Font icon tersebut yaitu MaterialIcons dan CupertinoIcons. Tapi memungkinkan juga Anda bisa custom icon sendiri. Berikut penjelasnya:

Material Icons #

Pada Flutter ketika kita membuat project sudah tersedia icon Material yang di taruh dalam Flutter SDK. Untuk melihat daftar-daftar icon yang ada di Flutter(Material Icons) bisa lihat website resminya Material Design Icon. Pada Flutter untuk icon Material di simpan di class bernama Icons class Icons berasal dari package material di Flutter SDK. Berikut contoh implementasinya:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import 'package:flutter/material.dart';

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: const <Widget>[
    Icon(
      Icons.favorite,
      color: Colors.pink,
      size: 24.0,
      semanticLabel: 'Text to announce in accessibility modes',
    ),
    Icon(
      Icons.audiotrack,
      color: Colors.green,
      size: 30.0,
    ),
    Icon(
      Icons.beach_access,
      color: Colors.blue,
      size: 36.0,
    ),
  ],
)

Result:

Cupertino Icons #

Cupertino Icons ini yaitu sebuah icon yang sebelumnya tersedia hanya untuk platform nya IOS/MacOS. Karena Flutter ini adalah framework yang support multi platform, yang mampu menyesuaikan sesuai platform tersebut. Untuk mendapatkan IconData di Flutter Anda perlu import flutter/cupertino karena CupertinoIcons bagian dari itu. Untuk melihat daftar icon yang tersedia bisa lihat di https://flutter.github.io/cupertino_icons/. Dan untuk implementnya seperti ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import 'package:flutter/cupertino.dart';

Row(
  children: [
    Icon(
      CupertinoIcons.ant_fill,
      size: 20,
      color: Colors.amber,
    ),
    Icon(
      CupertinoIcons.airplane,
      size: 20,
      color: Colors.pink,
    ),
    Icon(
      CupertinoIcons.home,
      size: 20,
      color: Colors.cyan,
    ),
  ],
)

Custom Icon #

Di Flutter ini Anda dapat membuat sendiri icon sesuai dengan keinginan, misal jika Anda ingin membuat icon Home yang lebih unik, dan tidak ada di MaterialIcons maupun CupertinoIcon Anda dapat buat sendiri icon tersebut dari SVG ke font icon dengan bantuan tool https://www.fluttericon.com/.

Jika terdapat kesalahan penulisan, typo, atau kurang sesuai dalam penulisan, bantu Saya untuk Edit on Github.