Cara Membuat Alert Dialog di Flutter: Tutorial Lengkap
Irhan Hisyam Dwi Nugroho
•
01 July 2025
•
566
Warga Bimbingan, di tutorial ini kamu akan belajar cara membuat alert dialog Flutter untuk menampilkan pesan atau konfirmasi kepada pengguna. Ikuti langkah-langkah mudah yang akan memudahkanmu mengimplementasikannya.
Yuk, simak cara menambahkan elemen seperti tombol dan ikon di dalam dialog. Dengan mengikuti tutorial ini, aplikasi Flutter kamu akan lebih interaktif dan memberikan pengalaman pengguna yang lebih baik.
Baca juga : Panduan Memilih Bootcamp Mobile Apps Development Terbaik
Pengertian Alert Dialog di Flutter
Alert Dialog di Flutter adalah sebuah widget yang digunakan untuk menampilkan pesan pop-up kepada pengguna, sering kali untuk memberikan informasi atau meminta konfirmasi.
Dialog ini muncul di atas konten utama aplikasi dan membutuhkan interaksi dari pengguna, seperti menekan tombol “OK” atau “Cancel”.
Dalam Flutter, alert dialog dapat dengan mudah dikustomisasi dengan menambahkan teks, gambar, atau tombol sesuai kebutuhan aplikasi.
Penggunaan AlertDialog membantu meningkatkan pengalaman pengguna dengan memberikan feedback atau memastikan aksi tertentu sebelum melanjutkan proses di aplikasi.
Baca juga : Mengenal Struktur dan Komponen Flutter dalam Aplikasi
Cara Membuat Alert Dialog di Flutter
Sumber: Canva
Setelah mengetahui pengertian dan fungsi dasar Alert Dialog di Flutter, sekarang Warga Bimbingan akan belajar bagaimana cara membuatnya di aplikasi.
Membuat alert dialog di Flutter sangat mudah dan langsung bisa diterapkan. Berikut langkah-langkah untuk membuat Alert Dialog Flutter:
1. MyApp - Struktur Dasar Aplikasi Flutter
Di tahap pertama, kita akan membuat struktur dasar aplikasi Flutter menggunakan MaterialApp dan Scaffold. MaterialApp memberikan kerangka desain untuk aplikasi, termasuk tema dan navigasi.
Di dalam Scaffold, kita menambahkan AppBar yang menampilkan judul aplikasi, dan area body yang akan menampilkan halaman utama aplikasi, dalam hal ini adalah LoginPage.
void main() => runApp(MyApp()); // Menjalankan aplikasi MyApp class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, // Menonaktifkan banner debug home: Scaffold( appBar: AppBar(title: Text("Tutorial Membuat Alert")), // AppBar dengan judul body: LoginPage(), // Memanggil widget LoginPage untuk tampilan utama ), ); } } |
Dengan menggunakan MaterialApp, aplikasi mendapatkan elemen-elemen dasar seperti AppBar dan Scaffold.
Home adalah widget pertama yang akan ditampilkan, dalam hal ini, halaman login. Halaman ini nantinya akan berisi form input untuk email dan password, serta tombol untuk memicu Alert Dialog ketika login berhasil.
Baca juga : Flutter Widget: Pengertian, Jenis, dan Cara Menggunakannya
2. LoginPage - Halaman Login
Selanjutnya, kita buat LoginPage, yang akan menampilkan form untuk email dan password. Kita menggunakan TextFormField untuk input email dan password, masing-masing dengan TextEditingController untuk mengontrol teks yang dimasukkan.
Setiap input juga dilengkapi dengan dekorasi seperti labelText, prefixIcon, dan border untuk tampilan yang lebih baik.
class LoginPage extends StatefulWidget { @override _LoginPageState createState() => _LoginPageState(); } class _LoginPageState extends State<LoginPage> { TextEditingController _emailController = TextEditingController(); TextEditingController _passwordController = TextEditingController(); @override Widget build(BuildContext context) { return Center( child: Padding( padding: const EdgeInsets.all(20), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextFormField( controller: _emailController, // Menghubungkan ke controller maxLines: 1, keyboardType: TextInputType.emailAddress, // Tipe input untuk email decoration: InputDecoration( labelText: "Email", // Label untuk input hintText: "Masukkan Email", // Petunjuk saat kosong prefixIcon: Icon(Icons.mail), // Ikon di kiri input border: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), // Menambahkan radius border ), ), ), SizedBox(height: 20), TextFormField( controller: _passwordController, // Menghubungkan ke controller maxLines: 1, keyboardType: TextInputType.visiblePassword, // Tipe input untuk password decoration: InputDecoration( labelText: "Password", hintText: "Masukkan Password", prefixIcon: Icon(Icons.lock), // Ikon untuk password border: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), ), ), ), SizedBox(height: 25), ElevatedButton( onPressed: () => submit( context, _emailController.text, _passwordController.text, ), child: Text("Login"), ) ], ), ), ); } } |
Baca juga : Panduan Belajar Flutter untuk Membuat Aplikasi Mobile
3. Efek Login (Alert Dialog dan Snackbar)
Fungsi submit() akan memeriksa apakah input email dan password sudah diisi. Jika ada input yang kosong, aplikasi akan menampilkan Snackbar yang memberi tahu pengguna untuk mengisi kolom yang kosong.
Snackbar akan muncul di bagian bawah layar dan hilang setelah beberapa detik. Jika input valid, AlertDialog akan ditampilkan, memberi tahu pengguna bahwa login berhasil.
void submit(BuildContext context, String email, String password) { if (email.isEmpty || password.isEmpty) { final snackBar = SnackBar( duration: const Duration(seconds: 5), content: Text("Email dan password harus diisi"), backgroundColor: Colors.red, ); ScaffoldMessenger.of(context).showSnackBar(snackBar); // Menampilkan SnackBar return; } // Menampilkan Alert Dialog jika login berhasil AlertDialog alert = AlertDialog( title: Text("Login Berhasil"), // Judul dialog content: Container( child: Text("Selamat Anda Berhasil login"), // Pesan di dalam dialog ), actions: [ TextButton( child: Text('Ok'), onPressed: () => Navigator.of(context).pop(), // Menutup dialog ), ], ); showDialog(context: context, builder: (context) => alert); // Menampilkan AlertDialog } |
Jika email atau password kosong, Snackbar muncul sebagai peringatan bagi pengguna untuk mengisi kolom tersebut.
Jika input sudah valid, AlertDialog ditampilkan sebagai konfirmasi bahwa login berhasil. Pengguna dapat menutup dialog dengan menekan tombol OK, yang akan menutup dialog dan mengembalikan pengguna ke layar login.
Baca juga : Panduan Lengkap Flutter Developer Roadmap untuk Pemula
Ingin Jadi Mobile Developer Profesional?
Setelah belajar cara membuat Alert Dialog di Flutter, saatnya kamu memperdalam kemampuan dan membangun aplikasi mobile yang lebih kompleks! Yuk, ikuti Bootcamp Mobile Developer di dibimbing.id!
Di bootcamp ini, kamu akan belajar langsung dari mentor berpengalaman tentang pengembangan aplikasi mobile menggunakan Flutter, Dart, serta teknologi terbaru lainnya.
Dengan pendekatan kurikulum yang praktis, kamu akan menguasai pembuatan aplikasi mobile mulai dari dasar hingga ke tingkat profesional.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu di dunia teknologi semakin terbuka lebar!
Jadi, tunggu apa lagi? Daftar sekarang di sini dan mulai perjalananmu menjadi Mobile Developer handal. #BimbingSampeJadi!
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
