Flutter, Membuat Aplikasi Mobile Kurang Dari Lima Menit

ByYusuf Ayuba

Flutter, Membuat Aplikasi Mobile Kurang Dari Lima Menit

Ingin membuat aplikasi mobile tapi bingung tidak tahu harus mulai darimana? lewat artikel ini saya akan tunjukkan cara cepat membuat aplikasi mobile yang kurang dari lima menit, baca artikel ini sampai selesai.

Perlu diketahui, aplikasi mobile yang akan kita buat ini adalah aplikasi WebView yang berfungsi hanya menampilkan sebuah halaman website sehingga tidak ada proses logika apapun dalam codingan kita.

Dengan menggunakan SDK dari Google yaitu Flutter, kita dapat membuat aplikasi WebView hanya dengan beberapa baris code, dan bahkan tidak lebih dari lima menit aplikasi kita sudah selesai. Dalam contoh ini, saya akan membuat aplikasi mobile untuk website saya ini https://dutainformasi.net. Kita langsung saja, berikut langkah-langkahnya

1. Buatlah project flutter baru (di artikel ini saya menggunakan editor Android Studio, silahkan sesuaikan dengan editor yang anda miliki).

2. Tambahkan library webview https://pub.dev/packages/webview_flutter

3. Tambahkan kode berikutkedalam project flutter anda. Silahkan ganti Link/URL yang ada dalam initialUrl

body: SafeArea(
   child: WebView(
     initialUrl: 'https://dutainformasi.net',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
     },
   ),
),

Dalam contoh codingan diatas, widget WebView saya tempatkan didalam widget SafeArea.

Kode lengkapnya

import 'dart:async';

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Duta Informasi mobile'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://dutainformasi.net',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
        ),
      ),
    );
  }
}

Jika semua kodingan sudah diketikkan, jalankan aplikasinya.

Bagaimana, mudahkan khan membuat aplikasi mobile? Sekian artikel singkat ini, semoga bermanfaat (*)

About the author

Yusuf Ayuba administrator

Leave a Reply

%d bloggers like this: