Image Load

Hello world,

WebView memungkinkan aplikasi untuk menampilkan sebuah halaman website di dalam aplikasi tersebut seolah seperti sebuah browser yang menjalankan url website. Jadi bisa dibilang kalau kita membuat webview kita seperti membuat browser sederhana yang isi urlnya bisa diatur secara statis ataupun dinamis. Kapan kita menggunakan webview? Biasanya kita akan menggunakan webview ketika konten di aplikasi kita memiliki referensi ke halaman website tertentu. Apakah aplikasi--aplikasi jaman sekarang masih ada yang menggunakan webview? Tentu banyak sekalil. Tetapi terkadang kita tidak menyadari klo kita sedang membuka sebuah webview.

Oke langsung saja kita coba bagaimana cara menampilkan url pada webview di flutter.

instalasi

Tambahkan dependecy pada pubspec.yaml seperti berikut.

dependencies:
  webview_flutter: ^0.3.22+1


Membuat main.dart

Untuk kali ini saya membuat 2 halaman sebagai contoh dimana main.dart akan menjadi halaman yang akan melempar url ke halaman kedua sehingga url akan bisa kita buat dinamis.

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

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MY App',
home: HalamanUtama(selectedUrl: "https://www.byriza.com",)
);
}
}

Membuat halaman URl
Kemudian kita buat halaman utama yang akan membaca url dan menampilkannya.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class HalamanUtama extends StatelessWidget {
final String selectedUrl;

final Completer<WebViewController> _controller =
Completer<WebViewController>();

HalamanUtama({
@required this.selectedUrl,
});


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.selectedUrl),
),
body: WebView(
initialUrl: selectedUrl,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
),
);
}
}

Contoh di atas adalah versi simple yang sebenarnya sama dengan yang ada pada halaman pub.dev akan tetapi sudah saya sederhanakan sehingga lebih mudah digunakan minimal untuk saya sendiri.

Selamat mencoba :)