Home Mobile MEMBUAT APLIKASI FLUTTER DIRECT KE WHATSAPP CHAT

MEMBUAT APLIKASI FLUTTER DIRECT KE WHATSAPP CHAT

2

Hello gaess, kembali lagi di tutorial flutter. Pada tutorial kali ini akan membuat sebuah aplikasi flutter yang dapat direct link ke aplikasi WhatsApp chat. DI Flutter kita dapat dengan mudah membuka aplikasi WhatsApp dan mengirim pesan. Pada tutorial kali ini kita akan menggunakan library url_launcher. Pada tutorial kali ini code dapat berjalan di android maupun IOS. Sehingga diharapkan kita merun project kita di perangkat asil, bukan emulator. Dan pastikan perangkat sudah terinstall aplikasi WhatsApp. Apabila belum terinstal maka nanti akan mucul notifikasi bahwa aplikasi WhatsApp belum terinstall. Langsung saja kita eksekusi..

Pertama kita buat projectnya terlebih dahulu, Namanya bebas sesuai yang kalian mau.

Kemudian hapus semua code yang yang ada di main.dart dan cukup sisakan void main dan class myapp dan juga myhomepagenya saja.

Tambahkan intent di AndroidManifestnya.

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.direct_whatsapp">
    <queries>

        <!--#enddocregion android-queries-->
        <!-- The "https" scheme is only required for integration tests of this package.
         It shouldn't be needed in most actual apps, or show up in the README! -->
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https" />
        </intent>
        <!--#docregion android-queries-->
    </queries>
    <application android:label="direct_whatsapp" android:name="${applicationName}" android:icon="@mipmap/ic_launcher">
        <activity android:name=".MainActivity" android:exported="true" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data android:name="io.flutter.embedding.android.NormalTheme" android:resource="@style/NormalTheme" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data android:name="flutterEmbedding" android:value="2" />
    </application>
</manifest>

Lalu kita buat method untuk direct ke aplikasi whatsapp

  openwhatsapp() async {
    String whatsapp = "+62822XXXXXXXX";
    String pesanText = "Hello";

    String whatsappURlAndroid = "https://wa.me/ $whatsapp?text=$pesanText";
    var whatappURLIos = "https://wa.me/$whatsapp?text=$pesanText";
    if (Platform.isIOS) {
      // untuk ios
      if (await canLaunch(whatappURLIos)) {
        await launch(whatappURLIos, forceSafariVC: false);
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text("whatsapp no installed")));
      }
    } else {
      // android , web
      if (await canLaunch(whatsappURlAndroid)) {
        await launch(whatsappURlAndroid);
      } else {
        var context2 = context;
        ScaffoldMessenger.of(context2).showSnackBar(
            const SnackBar(content: Text("whatsapp no installed ")));
      }
    }
}

 

Selanjutnya kita buat button untuk memanggil method yang telah kita buat tadi.

body: Center(
          child: ElevatedButton(
        child: const Text("Direct to WA"),
        onPressed: () {
          openwhatsapp();
        },
      )),

 

Kemudian kita jalankan aplikasinya dan hasilnya akan seperti ini:

Untuk code lengkapnya seperti dibawah ini:

import 'dart:io';

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

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage());
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Direct to WhatsApp")),
      body: Center(
          child: ElevatedButton(
        child: const Text("Direct to WA"),
        onPressed: () {
          openwhatsapp();
        },
      )),
    );
  }

  openwhatsapp() async {
    String whatsapp = "+62822XXXXXXXX";
    String pesanText = "Hello";

    String whatsappURlAndroid = "https://wa.me/ $whatsapp?text=$pesanText";
    var whatappURLIos = "https://wa.me/$whatsapp?text=$pesanText";
    if (Platform.isIOS) {
      // untuk ios
      if (await canLaunch(whatappURLIos)) {
        await launch(whatappURLIos, forceSafariVC: false);
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text("whatsapp no installed")));
      }
    } else {
      // android , web
      if (await canLaunch(whatsappURlAndroid)) {
        await launch(whatsappURlAndroid);
      } else {
        var context2 = context;
        ScaffoldMessenger.of(context2).showSnackBar(
            const SnackBar(content: Text("whatsapp no installed ")));
      }
    }
  }
}

Sekian tutorial kali ini, semoga bermanfaat dan sampai jumpa ditutorial selanjutnya

2 COMMENTS

Comments are closed.