Image Load

Hello world,

Terkadang kita menemukan kondisi dimana kita harus menampilkan kode html pada aplikasi kita. Contoh yang paling sering ditemukan adalah ketika kita mengambil data dari API yang datanya diinput dari website seperti website berita/blog dan lain-lain. Untuk menampilkan datanya harus menggunakan penanganan khusus dimana di dalam kode html yang didapat dari API biasanya berisi text, link dan image.

Ada beberapa package pada pub.dev yang bisa kita gunakan seperti pada contoh ini saya menggunakan flutter_html. Dengan flutter_dev kita bisa menampilkan text, link dan image dimana link dan image bisa kita fungsikan saat diklik. Oke mari kita coba.

instalasi

Tambahkan pada pubspec.yaml

dependencies:
  flutter_html: ^1.0.0

Tambahkan pada halaman kita.

import 'package:flutter_html/flutter_html.dart';

Kemudian kita buat halaman utama kita.

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

void main(){
runApp(
new MaterialApp(
title: "My Apps",
home: new Myapp(),
)
);
}


class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
padding: EdgeInsets.all(20.0),
child: new Center(
child: new Text("Hello World"),
)
)
);
}
}


Kemudian kita tampilkan kode html dengan cara seperti berikut

Html(
data: """
<div>
<h1>Demo Page</h1>
<p>This is a fantastic product that you should buy!</p>
<h3>Features</h3>
<ul>
<li>It actually works</li>
<li>It exists</li>
<li>It doesn't cost much!</li>
</ul>
<!--You can pretty much put any html in here!-->
<p><b>Hello world, </b></p><p>Melanjutkan pembahasan mengenai form sebelumnya yang sudah terlalu lama belum ada kelanjutannya kali ini saya membuat artikel mengenai bagaimana mengambil atau menambahkan gambar dari <i>handphone</i> ke aplikasi kita menggunakan image picker. Kita bisa mengambil gambar dari galeri ataupun dari kamera. Fungsinya biasanya ketika kita membuat sebuah form yang berisi inputan data yang mengharuskan pengguna mengupload foto untuk kelengkapan data.</p>
</div>
""",
//Optional parameters:
onLinkTap: (url) {
// open url in a webview
},
onImageTap: (src) {
// Display the image in large form.
},
),

Pada contoh di atas ada onLinkTap dan onImageTap yang bisa kita isi dengan event yang diinginkan jika link dan image diklik. Kita bisa mengganti kode html di atas dengan object dari API seperti berikut.

Html(
data: kontenhtml,
//Optional parameters:
onLinkTap: (url) {
// open url in a webview
},
onImageTap: (src) {
// Display the image in large form.
},
),

Hasilnya jd seperti berikut.

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

void main(){
runApp(
new MaterialApp(
title: "My Apps",
home: new Myapp(),
)
);
}

class HalamanUtama extends StatefulWidget {
@override
_HalamanUtamaState createState() => _HalamanUtamaState();
}

class _HalamanUtamaState extends State<HalamanUtama> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Halaman Utama"),
),
body: Html(
data: """
<div>
<h1>Demo Page</h1>
<p>This is a fantastic product that you should buy!</p>
<h3>Features</h3>
<ul>
<li>It actually works</li>
<li>It exists</li>
<li>It doesn't cost much!</li>
</ul>
<!--You can pretty much put any html in here!-->
<p><b>Hello world, </b></p><p>Melanjutkan pembahasan mengenai form sebelumnya yang sudah terlalu lama belum ada kelanjutannya kali ini saya membuat artikel mengenai bagaimana mengambil atau menambahkan gambar dari <i>handphone</i> ke aplikasi kita menggunakan image picker. Kita bisa mengambil gambar dari galeri ataupun dari kamera. Fungsinya biasanya ketika kita membuat sebuah form yang berisi inputan data yang mengharuskan pengguna mengupload foto untuk kelengkapan data.</p>
</div>
""",
//Optional parameters:
onLinkTap: (url) {
// open url in a webview
},
onImageTap: (src) {
// Display the image in large form.
},
),
);
}
}


Selamat mencoba