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
Great blog post! I’m a beginner in coding and this article was really helpful.
Thanks kak
Comments are closed.