Materi Pertemuan 7. Membuat Aplikasi Sederhana dengan Flutter

Hallo semua, kali ini kita akan belajar membuat sebuah aplikasi sederhana dengan menggunakan flutter, setelah beberapa pertemuan sebelumnya kita telah membahas terkait dengan teori flutter. Mari kita praktikan bersama ilmu yang telah kita pelajari sebelumnya.

Pada pertemuan ini kita akan membuat sebuah webview menggunakan flutter, kenapa kita belajar membuat sebuah webview ? 

Karena membuat webview ini termasuk hal yang mudah, dan saya yakin ini akan sangat bermanfaat bagi semua, karena nanti webview bisa langsung di upload ke playstore. Mari kita mulai.

1. Membuat AppBar 

Sebuah aplikasi android sejatinya selalu memilik yang namnya AppBar. AppBar ini nanti berfungsi sebagai header yang menunjukkan nama aplikasi atau judul halaman yang sedang tampil di layar user.

import 'package:flutter/material.dart';

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

class MyWebView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Webview Aplikasi")),
      
    );
  }
}

Baik coba perhatikan kode di atas.

import 'package:flutter/material.dart';

Kod ini berfungsi memanggil material.dart yang berisi berbagai fungsi dasar seperti widget - widget yang telah kita pelajari sebelumnya.

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

Kode ini berfungsi untuk melakukan perintah kepada aplikasi agar menjalankan kode di atas untuk pertama kali. Jadi apabila aplikasi di jalankan, kode yang pertama kali di eksekusi oleh aplikasi adalah widget dengan nama MyWebView. Semoga bisa dipahami.

class MyWebView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("JuniorAcademy Webview")),
      
    );
  }
}

Selanjutnya kode ini, berisi widget dengan nama JuniorAcademy Webview  dimana widget digunakan yaitu StatelessWidget. seperti yang sudah kita pelajari fungsi dari widget tersebut yaitu untuk menampilkan sesuatu tampilan yang bersifat statis, artinya bersifat tetap, contohnya seperti AppBar yang kita buat.

return Scaffold(
      appBar: AppBar(title: Text("Webview Aplikasi")),
      
    );

Dari  statelesswidget tersebut terdapat kembalian berupa Scaffold dimana Scaffold tersebut menampilkan widget AppBar yang diberi judul Webview Aplikasi.

2. Memanggil Webview

Baik langkah selanjutnya, kita harus menambahkan plugin webview pada pubspec.yaml. plugin tersebut berguna memanggil fungsi webview.

flutter_webview_plugin: 0.3.0+2
webview_flutter: 0.2.0

Untuk lokasinya bisa cek gambar di bawah ini.

Setelah kita mendapatkan plugin dari webview, kita tinggal menambahkan sedikit kode pada kode sebelumnya yang telah kita buat.

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
void main() => runApp(MyWebView());

class MyWebView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: 'https://junioracademy.id',
      hidden: true,
      appBar: AppBar(title: Text("JuniorAcademy Webview")),
      
    );
  }
}

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

Pada kode di atas, kita menambahkan perintah memanggil plugin webview.

return WebviewScaffold(
      url: 'https://junioracademy.id',
      hidden: true,
      appBar: AppBar(title: Text("JuniorAcademy Webview")),
      
    );

sedangkan untuk kode di atas ini, untuk memanggil halaman website https://junioracademy.id
Coba sekarang kita simpan, dan jalankan kode tersebut. Bagaimana hasilnya ? silahkan jika ada yang berhasil, untuk share di komentar.

Terimakasih.

Ahmad Subki.