WhatsApp Pixel Messenger - Panduan & Aplikasi
WhatsApp Pixel Messenger
✨ Aplikasi 8-bit untuk kirim pesan WhatsApp — pilih kode negara, tulis pesan, dan langsung terhubung ke WhatsApp. Dilengkapi riwayat pengiriman, template cepat, dan mode malam retro.
Fitur Unggulan
- 🎮 Tampilan bergaya Pixel Art (seperti game NES)
- 📞 Kode negara singkat: +62, +60, +1, dll (tanpa nama negara)
- 💾 Riwayat pesan tersimpan di browser (localStorage)
- ⚡ Template pesan cepat (klik langsung terisi)
- 🌙 Dark mode retro dengan warna gelap
- 📋 Salin pesan & kirim ulang dari riwayat
- 🔢 Validasi nomor & counter karakter (maks 1000)
THIS THE CODE
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart'; // Untuk membuka URL (WhatsApp)
void main() {
runApp(const WhatsAppSenderApp());
}
class WhatsAppSenderApp extends StatefulWidget {
const WhatsAppSenderApp({super.key});
@override
State createState() => _WhatsAppSenderAppState();
}
class _WhatsAppSenderAppState extends State {
// Mengatur tema awal aplikasi (terang secara default)
ThemeMode _themeMode = ThemeMode.light;
// Fungsi untuk beralih tema
void _toggleTheme(bool isDarkMode) {
setState(() {
_themeMode = isDarkMode ? ThemeMode.dark : ThemeMode.light;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'WhatsApp Kirim Pesan Cepat',
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.teal, // Warna utama untuk tema terang
appBarTheme: const AppBarTheme(
backgroundColor: Colors.teal,
foregroundColor: Colors.white,
),
cardTheme: CardTheme(
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Colors.teal, width: 2),
),
labelStyle: const TextStyle(color: Colors.teal),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.teal,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
textStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
),
darkTheme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.teal, // Warna utama untuk tema gelap
appBarTheme: AppBarTheme(
backgroundColor: Colors.blueGrey[800],
foregroundColor: Colors.white,
),
cardTheme: CardTheme(
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
color: Colors.blueGrey[700], // Warna card di dark mode
),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Colors.tealAccent, width: 2),
),
labelStyle: const TextStyle(color: Colors.tealAccent),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.tealAccent,
foregroundColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
textStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
),
themeMode: _themeMode, // Menggunakan tema yang dipilih
home: WhatsAppSenderPage(
toggleTheme: _toggleTheme, isDarkMode: _themeMode == ThemeMode.dark),
debugShowCheckedModeBanner: false, // Sembunyikan banner debug
);
}
}
class WhatsAppSenderPage extends StatefulWidget {
final Function(bool) toggleTheme;
final bool isDarkMode;
const WhatsAppSenderPage({
super.key,
required this.toggleTheme,
required this.isDarkMode,
});
@override
State createState() => _WhatsAppSenderPageState();
}
class _WhatsAppSenderPageState extends State {
// GlobalKey untuk validasi form
final GlobalKey _formKey = GlobalKey();
// Controller untuk input nomor telepon dan pesan
final TextEditingController _phoneController = TextEditingController();
final TextEditingController _messageController = TextEditingController();
// Daftar kode negara dan nama negara
final Map _countryCodes = {
'Indonesia (+62)': '+62',
'USA (+1)': '+1',
'India (+91)': '+91',
'Malaysia (+60)': '+60',
'Singapore (+65)': '+65',
'Australia (+61)': '+61',
'Jepang (+81)': '+81',
'China (+86)': '+86',
'Inggris (+44)': '+44',
'Jerman (+49)': '+49',
// Anda bisa menambahkan lebih banyak negara di sini
};
// Kode negara yang dipilih saat ini
String? _selectedCountryCode;
@override
void initState() {
super.initState();
// Inisialisasi kode negara default ke Indonesia
_selectedCountryCode = _countryCodes['Indonesia (+62)'];
}
@override
void dispose() {
// Membersihkan controller saat widget dihapus
_phoneController.dispose();
_messageController.dispose();
super.dispose();
}
// Fungsi untuk mengirim pesan WhatsApp
Future _sendWhatsAppMessage() async {
// Validasi form
if (_formKey.currentState!.validate()) {
final String fullPhoneNumber =
'$_selectedCountryCode${_phoneController.text.trim()}';
final String message = _messageController.text.trim();
// Encode pesan agar aman untuk URL
final String encodedMessage = Uri.encodeComponent(message);
// Buat URL WhatsApp
// Menggunakan wa.me lebih universal dan akan membuka browser jika WhatsApp tidak terinstal
final Uri url =
Uri.parse('https://wa.me/$fullPhoneNumber?text=$encodedMessage');
try {
if (await canLaunchUrl(url)) {
await launchUrl(url);
} else {
// Tampilkan snackbar jika tidak bisa membuka WhatsApp
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Tidak dapat membuka WhatsApp. Pastikan aplikasi terinstal.'),
backgroundColor: Colors.red,
),
);
}
} catch (e) {
// Tangani error lain saat meluncurkan URL
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Terjadi kesalahan: $e'),
backgroundColor: Colors.red,
),
);
}
}
}
// Fungsi untuk membersihkan semua input
void _clearFields() {
setState(() {
_phoneController.clear();
_messageController.clear();
// Mengatur ulang kode negara ke default (Indonesia)
_selectedCountryCode = _countryCodes['Indonesia (+62)'];
_formKey.currentState?.reset(); // Reset validasi form
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Kirim Pesan WhatsApp Cepat'),
centerTitle: true,
actions: [
IconButton(
icon: Icon(widget.isDarkMode ? Icons.wb_sunny : Icons.nightlight_round),
onPressed: () => widget.toggleTheme(!widget.isDarkMode),
tooltip: 'Ganti Tema',
),
],
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(20.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Deskripsi aplikasi
Card(
margin: const EdgeInsets.only(bottom: 20),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Text(
'Aplikasi ini membantu Anda mengirim pesan WhatsApp dengan cepat tanpa perlu menyimpan kontak.',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: Theme.of(context).brightness == Brightness.dark
? Colors.white70
: Colors.black87,
),
),
const SizedBox(height: 10),
Text(
'Pilih kode negara, masukkan nomor, tulis pesan, lalu klik "Kirim Pesan".',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).brightness == Brightness.dark
? Colors.white54
: Colors.black54,
),
),
],
),
),
),
// Pemilihan Kode Negara
Card(
margin: const EdgeInsets.only(bottom: 15),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Pilih Kode Negara',
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(height: 10),
DropdownButtonFormField(
value: _selectedCountryCode,
decoration: const InputDecoration(
labelText: 'Kode Negara',
prefixIcon: Icon(Icons.public),
),
items: _countryCodes.entries.map((entry) {
return DropdownMenuItem(
value: entry.value,
child: Text(entry.key),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
_selectedCountryCode = newValue;
});
},
validator: (value) {
if (value == null || value.isEmpty) {
return 'Harap pilih kode negara';
}
return null;
},
),
],
),
),
),
// Input Nomor Telepon
Card(
margin: const EdgeInsets.only(bottom: 15),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Masukkan Nomor Telepon',
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(height: 10),
TextFormField(
controller: _phoneController,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
labelText: 'Nomor Telepon',
hintText: 'Misal: 81234567890 (tanpa 0 di depan)',
prefixText: '$_selectedCountryCode ', // Tampilkan kode negara
prefixIcon: const Icon(Icons.phone),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Nomor telepon tidak boleh kosong';
}
if (!RegExp(r'^[0-9]+$').hasMatch(value)) {
return 'Nomor telepon hanya boleh angka';
}
return null;
},
),
],
),
),
),
// Input Pesan
Card(
margin: const EdgeInsets.only(bottom: 25),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Tulis Pesan Anda',
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(height: 10),
TextFormField(
controller: _messageController,
maxLines: 5,
decoration: const InputDecoration(
labelText: 'Pesan',
hintText: 'Halo, bagaimana kabarmu?',
alignLabelWithHint: true,
prefixIcon: Padding(
padding: EdgeInsets.only(bottom: 60), // Posisikan ikon di atas
child: Icon(Icons.message),
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Pesan tidak boleh kosong';
}
return null;
},
),
],
),
),
),
// Tombol Kirim Pesan
ElevatedButton.icon(
onPressed: _sendWhatsAppMessage,
icon: const Icon(Icons.send),
label: const Text('Kirim Pesan via WhatsApp'),
),
const SizedBox(height: 15),
// Tombol Hapus Input
OutlinedButton.icon(
onPressed: _clearFields,
icon: const Icon(Icons.clear),
label: const Text('Bersihkan Semua Input'),
style: OutlinedButton.styleFrom(
foregroundColor: Theme.of(context).colorScheme.onSurface,
side: BorderSide(
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.5),
),
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
textStyle: const TextStyle(fontSize: 16),
),
),
],
),
),
),
);
}
}
WA BLASTER
KODE NEGARA
PESAN
0 / 1000
PESAN CEPAT
⭐ Tertarik
✅ Konfirmasi
💰 Harga & Stok
🚀 Siap Transaksi
⏰ Balas Nanti
RIWAYAT KIRIM
Komentar
Posting Komentar