Flutter adalah kerangka kerja pengembangan aplikasi seluler open-source yang populer. Saat membangun aplikasi Flutter, seringkali kita perlu mengintegrasikan fitur yang memungkinkan kita membuka URL di peramban atau menghubungi nomor telepon secara langsung. Salah satu cara untuk melakukan hal ini adalah dengan menggunakan plugin Flutter yang disebut “URL Launcher.” Dalam artikel ini, kita akan mempelajari cara mengintegrasikan Flutter URL Launcher ke dalam aplikasi Anda untuk membuka URL dan menghubungi nomor telepon.

Apa itu Flutter URL Launcher?

Flutter URL Launcher adalah plugin Flutter yang memungkinkan kita untuk menjalankan beberapa fungsi, seperti:

• Membuka URL di peramban.
• Membuka nomor telepon pada aplikasi telepon.
• Mengirim SMS atau email.
• Membuka alamat pada aplikasi peta.
• Dan banyak lagi.

Dengan URL Launcher, Anda dapat membuat aplikasi Flutter yang lebih interaktif dan berfungsi lebih baik. Ini memungkinkan pengguna aplikasi Anda untuk dengan mudah mengakses situs web, nomor telepon, alamat email, dan banyak lagi, semuanya dengan beberapa baris kode saja.

Cara Mengintegrasikan Flutter URL Launcher

Langkah-langkah berikut ini akan membantu Anda mengintegrasikan Flutter URL Launcher ke dalam proyek Flutter Anda:

1. Tambahkan Dependensi

Untuk memulai, Anda perlu menambahkan dependensi url_launcher ke dalam berkas pubspec.yaml proyek Anda. Pastikan untuk menyertakan versi terbaru dari plugin ini:

dependencies:
  url_launcher: ^6.0.12

Jalankan perintah flutter pub get untuk mengunduh dan menginstal dependensi ini ke dalam proyek Anda.

2. Impor Package

Selanjutnya, impor package URL Launcher di berkas Dart Anda:

import 'package:url_launcher/url_launcher.dart';

3. Membuka URL

Untuk membuka URL di peramban, Anda dapat menggunakan kode berikut:

Future<void> _launchURL() async {
  const url = 'https://www.example.com';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

4. Menghubungi Nomor Telepon

Untuk menghubungi nomor telepon, Anda dapat menggunakan kode berikut:

Future<void> _makePhoneCall() async {
  const phoneNumber = '1234567890';
  if (await canLaunch('tel:$phoneNumber')) {
    await launch('tel:$phoneNumber');
  } else {
    throw 'Could not call $phoneNumber';
  }
}

5. Menjalankan Fungsi-Fungsi Lainnya

Flutter URL Launcher mendukung berbagai fungsi lainnya, seperti mengirim SMS, email, membuka alamat di aplikasi peta, dan lain-lain. Anda dapat mengeksplorasi fitur-fitur ini dengan membaca dokumentasi resmi plugin.

6. Contoh Implementasi Sederhananya

Output:

Source Code :

main.dart

void main() async {
  runApp(ChangeNotifierProvider(
      create: (BuildContext context) => CounterModel(), child: MyApp()));
}

class MyApp extends StatelessWidget {
  MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        debugShowCheckedModeBanner: false,
        home: UrlPage());
  }
}

url_launcher.dart

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

class UrlPage extends StatefulWidget {
  const UrlPage({Key? key}) : super(key: key);

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

class _UrlPageState extends State<UrlPage> {
  TextEditingController _textFieldController = TextEditingController();
  String _phone = '';
  Future<void>? _launched;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('URL Launcher'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                controller: _textFieldController,
                decoration: InputDecoration(
                  hintText: 'Nomor Telepon atau URL',
                ),
              ),
              SizedBox(
                height: 10,
              ),
              ElevatedButton(
                onPressed: () {
                  final phoneNumber = _textFieldController.text;
                  if (phoneNumber.isNotEmpty) {
                    _makePhoneCall(phoneNumber);
                  }
                },
                child: Text('Panggil'),
              ),
              ElevatedButton(
                onPressed: () {
                  final url = _textFieldController.text;
                  if (url.isNotEmpty) {
                    _launchURL(url);
                  }
                },
                child: Text('Buka URL'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> _makePhoneCall(String phoneNumber) async {
    final Uri launchUri = Uri(
      scheme: 'tel',
      path: phoneNumber,
    );
    await launchUrl(launchUri);
  }

  Future<void> _launchURL(String url) async {
    final Uri launchUri = Uri.parse("https://$url");
    await launchUrl(launchUri);
  }
}

Kesimpulan

Dengan menggunakan Flutter URL Launcher, Anda dapat dengan mudah mengintegrasikan fitur-fitur penting ke dalam aplikasi Flutter Anda, seperti membuka URL di peramban dan menghubungi nomor telepon secara langsung. Plugin ini sangat berguna untuk meningkatkan interaktivitas dan fungsionalitas aplikasi Anda.

Dengan demikian, Anda memiliki dasar untuk mengintegrasikan Flutter URL Launcher ke dalam proyek Anda. Selamat mengembangkan aplikasi Flutter yang lebih interaktif dan lebih bermanfaat!

Dengan membaca artikel ini, Anda akan memiliki pemahaman yang kuat tentang konsep dasar Flutter URL Launcher dan cara menggunakannya dalam pengembangan aplikasi Flutter Anda.