Menampilkan Gambar Dari Internet Pada Flutter

Menampilkan Gambar Dari Internet Pada Flutter – Hallo sobat kopi coding, pada postingan kali ini kita akan mempelajari bagaimana cara menampilkan gambar dari internet pada framework Flutter.

Untuk menampilkan gambar dari internet kita menggunakan constructor yaitu Image.network() dengan memasukkan URL gambar yang bertipe string. berikut contohnya:

Image.network(
'https://www.kopicoding.com/wp-content/uploads/2018/12/mmm.png',
)

Yuk langsung saja kita lihat source code dan penjelasan cara menampilkan gambar dari internet dengan framework Flutter.

Membuat Project Baru :

Untuk membuat project baru buka terminal serta menggunakan editor Visual Studio Code, ikuti langkah berikut:

$ flutter create gambarinternet
$ cd gambarinternet
$ code .

Source Code :

Pada folder project buka file main.dart yang berada di folder lib, lalu hapus semua code dan masukkan code berikut:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Kopi Coding';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Image.network(
          'https://www.kopicoding.com/wp-content/uploads/2018/12/mmm.png',
        ),
      ),
    );
  }
}

Simpan source code dengan nama main.dart dan jangan lupa harus berektensi .dart

Penjelasan :

Berikut adalah penjelasan source code programnya :

• Baris 1: Mengimport library material.dart
• Baris 3: Membuat fungsi main yang memanggil class MyApp
• Baris 5: membuat class MyApp yang ber-extends StatelessWidget
• Baris 8: Mendeklarasikan variable title dengan value “Kopi Coding”
• Baris 10-15: Inisialisasi variable untuk konfigurasi AppBar
• Baris 16: inisialisasi body dengan memanggil constructor Image.network() dengan mengambil gambar dari URL https://www.kopicoding.com/wp-content/uploads/2018/12/mmm.png

Menjalankan Flutter:

Berikut adalah cara menjalankan flutter secara manual:

$ flutter run

berikut gambar hasil compile dan run source code programnya:

iOS :

Android :

Kesimpulan :

Dari hasil aplikasi yang dijalankan, source code tersebut berhasil dapat dijalankan tanpa ada error dan menampilkan hasil gambar yang menggunakan url dari internet serta dapat berjalan di emulator iOS ataupun Android.

Sekian tutorial cara menampilkan gambar di framework flutter, semoga bermanfaat 🙂

Happy Coding!

Sumber: https://flutter.dev/docs/cookbook/images/network-image