dibimbing.id - Cara Membuat Alert Dialog di Flutter: Tutorial Lengkap

Cara Membuat Alert Dialog di Flutter: Tutorial Lengkap

Irhan Hisyam Dwi Nugroho

01 July 2025

560

Image Banner

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!

Share

Author Image

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.

Hi!👋
Kalau kamu butuh bantuan,
hubungi kami via WhatsApp ya!