Membuka URL di Flutter

Membuka URL di Flutter

Ketika berselancar di internet, setiap pengguna akan menemukan banyak tombol, teks, dan sebagainya, yang akan mengarahkan pengguna ke halaman web yang berbeda di tab yang sama atau di tab yang berbeda ketika diklik. Begitu juga, ketika seorang developer menghubungkan URL ke tombol atau teks dalam aplikasi, aplikasi akan membuka situs web ketika diklik.

Ketika aplikasi yang dibuat membuka situs web melalui browser, maka melibatkan dua aplikasi yang bekerja. Satunya aplikasi yang digunakan oleh pengguna dan yang lainnya adalah browser. Namun, ketika membuka URL di dalam aplikasi, hanya melibatkan satu aplikasi. Kedua jenis pilihan ini dapat digunakan oleh developer sesuai kebutuhan pengguna.

URL Launcher

Dalam Flutter, segala sesuatu diatur menggunakan widget, Flutter juga menggunakan banyak plugin atau dependency untuk membuat aplikasi berjalan lebih cepat dan mudah. Dalam hal ini, plugin “url_launcher” dapat digunakan untuk membuka URL dalam aplikasi seluler.

Langkah-langkah untuk menambahkan plugin ini ke aplikasi Flutter adalah sebagai berikut:

Langkah 1: Buka file “pubspec.yaml” dari folder proyek.

Tangkapan layar file pubspec.yaml pada explorer panel

Langkah 2: Pada berkas pubspec.yaml, ketikkan “url_launcher:” di bawah dependencies.

Kode akan terlihat seperti ini:

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.1.10

Langkah 3: Klik tombol “Pub Get” di bagian atas aplikasi (Android Studio), atau bisa juga dengan menjalankan perintah “flutter pub get” pada terminal.

Langkah 4: Jika muncul pesan “Process finished with exit code 0” di konsol, berarti dependensi telah berhasil ditambahkan.

Langkah 5: Impor plugin atau paket dengan menambahkan kode “import ‘package:url_launcher/url_launcher.dart’;” di bagian atas file “main.dart”.

URL di Browser

Sekarang, mari buat fungsi yang dapat dipanggil setiap kali pengguna mengklik tombol yang terhubung dengan URL untuk membukanya di browser.

_launchURLBrowser() async {
  var url = Uri.parse("https://nextgen.co.id/");
  if (!await canLaunchUrl(url)) {
    await launchUrl(
      url,
      mode: LaunchMode.externalApplication,
    );
  } else {
    throw 'Tidak bisa membuka laman $url';
  }
}

Ini adalah apa yang kita lakukan dalam fungsi di atas:

  • Fungsi ini diberi nama ” _launchURLBrowser ” dan dideklarasikan sebagai ” async “, sehingga mengembalikan sebuah promise.
  • Variabel “url” diberi nilai alamat web yang dibutuhkan, sebagai string. Variabel ini dideklarasikan sebagai “const”, sehingga variabel tidak akan berubah dalam keadaan apa pun.

URL Dalam Aplikasi (In App WebView)

Sekarang, mari kita buat sebuah fungsi yang dapat dipanggil setiap kali pengguna mengklik tombol yang terhubung dengan URL, untuk membukanya di dalam aplikasi.

_launchURLApp() async {
  var url = Uri.parse("https://nextgen.co.id/");
  if (!await canLaunchUrl(url)) {
    await launchUrl(
      url,
      mode: LaunchMode.inAppWebView,
    );
  } else {
    throw 'Tidak bisa membuka laman $url';
  }
}

Ini adalah apa yang dilakukan pada fungsi di atas:

  • Fungsi dinamai di sini sebagai “_launchURLApp” dan dideklarasikan sebagai “async”, sehingga mengembalikan sebuah promise.
  • Variabel “url” diisi dengan alamat web yang diperlukan, sebagai string. Variabel dideklarasikan sebagai “const”, sehingga variabel tidak berubah dalam keadaan apa pun.

Memanggil Fungsi

Fungsi-fungsi di atas dapat dipanggil dengan memanggil nama fungsi. Contohnya adalah sebagai berikut:

ElevatedButton(
                  onPressed: _launchURLBrowser,
                  style: ButtonStyle(
                    padding:
                        MaterialStateProperty.all(const EdgeInsets.all(5.0)),
                    textStyle: MaterialStateProperty.all(
                      const TextStyle(color: Colors.black),
                    ),
                  ),
                  child: const Text('Buka di Browser'),
                ),
                Container(
                  height: 20.0,
                ),
                ElevatedButton(
                  onPressed: _launchURLApp,
                  style: ButtonStyle(
                    padding: MaterialStateProperty.all(const EdgeInsets.all(5)),
                    textStyle: MaterialStateProperty.all(
                      const TextStyle(color: Colors.black),
                    ),
                  ),
                  child: const Text('Buka di App'),
                ),

Pada blok kode di atas, kita melakukan dua hal:

  • Pertama, kita membuat dua tombol dengan tulisan “Buka di Browser” dan “Buka di App”, masing-masing merupakan elevated button.
  • Kedua, kita menetapkan atribut onPressed untuk masing-masing tombol agar saat tombol pertama ditekan, URL akan dibuka di browser dan saat tombol kedua ditekan, URL akan dibuka di aplikasi itu sendiri.

Berikut ini source code lengkapnya:

// mengimport dependency
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

// fungsi yang mentrigger proses build aplikasi
void main() => runApp(const MyApp());

//fungsi untuk membuka url di browser
_launchURLBrowser() async {
  var url = Uri.parse("https://nextgen.co.id/");
  if (!await canLaunchUrl(url)) {
    await launchUrl(
      url,
      mode: LaunchMode.externalApplication,
    );
  } else {
    throw 'Tidak bisa membuka laman $url';
  }
}

//fungsi untuk membuka url di webview aplikasi
_launchURLApp() async {
  var url = Uri.parse("https://nextgen.co.id/");
  if (!await canLaunchUrl(url)) {
    await launchUrl(
      url,
      mode: LaunchMode.inAppWebView,
    );
  } else {
    throw 'Tidak bisa membuka laman $url';
  }
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Nextgen Tutorial'),
          backgroundColor: Colors.blue,
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              children: [
                Container(
                  height: 250.0,
                ),
                const Text(
                  'Selamat Datang di Nextgen Tutorial!',
                  style: TextStyle(
                    fontSize: 30.0,
                    color: Colors.blue,
                    fontWeight: FontWeight.bold,
                  ),
                  textAlign: TextAlign.center,
                ),
                Container(
                  height: 20.0,
                ),
                ElevatedButton(
                  onPressed: _launchURLBrowser,
                  style: ButtonStyle(
                    padding:
                        MaterialStateProperty.all(const EdgeInsets.all(5.0)),
                    textStyle: MaterialStateProperty.all(
                      const TextStyle(color: Colors.black),
                    ),
                  ),
                  child: const Text('Buka di Browser'),
                ),
                Container(
                  height: 20.0,
                ),
                ElevatedButton(
                  onPressed: _launchURLApp,
                  style: ButtonStyle(
                    padding: MaterialStateProperty.all(const EdgeInsets.all(5)),
                    textStyle: MaterialStateProperty.all(
                      const TextStyle(color: Colors.black),
                    ),
                  ),
                  child: const Text('Buka di App'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Gestures Di Flutter
Tutorial setelahnya : Route Dan Navigator Di Flutter
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan