Home Mobile Show Alert Popup Dialog with Cupertino Alert Dialog

Show Alert Popup Dialog with Cupertino Alert Dialog

0

Halo sobat Flutter! Pada artikel kali ini saya ingin membahas tentang “Show Alert Popup Dialog with Cupertino Alert Dialog”.

Cupertino Alert Dialog adalah salah satu jenis dari function pada showDialog. –

  1. Buat sebuah Material Button
 MaterialButton(
                    minWidth: double.infinity,
                    child: Container(
                      height: 40,
                      width: double.infinity,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(color: Color(0XFFF2F2F2), width: 2),
                        boxShadow: [
                          BoxShadow(color: Colors.white, spreadRadius: 1)
                        ],
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "ABSEN MASUK KELAS",
                            style: TextStyle(
                                fontSize: 14,
                                color: Color(0xff3ac6bc),
                                fontWeight: FontWeight.bold),
                          )
                        ],
                      ),
                    ),
                    onPressed: (){}
                    }),

2. Kemudian tambahkan code berikut didalam OnPressed Material Button

  final number = await showCupertinoDialog(
                          barrierDismissible: true,
                          context: context,
                          builder: createDialog);
                      print('Absen Kelas ? $number');
                   }
                ),

3. Buat widget baru menggunakan Cupertino Alert Dialog

Widget createDialog(BuildContext context) => CupertinoAlertDialog(
        actions: [
          CupertinoDialogAction(
            child: Text(
              "Hadir",
              style: TextStyle(
                fontSize: 14,
                color: Color(0xff13A89E),
              ),
            ),
            onPressed: () => Navigator.pop(context, 1),
          ),
          CupertinoDialogAction(
              child: Text(
                "Sakit",
                style: TextStyle(
                  fontSize: 14,
                  color: Color(0xffF2C94C),
                ),
              ),
              onPressed: () => Navigator.pop(context, 2)),
          CupertinoDialogAction(
            child: Text(
              "Tidak Hadir",
              style: TextStyle(
                fontSize: 14,
                color: Colors.red,
              ),
            ),
            onPressed: () => Navigator.pop(context, 3),
          ),
        ],
      );

4. Terakhir tambahkan code berikut didalam onPressed, ini berfungsi sebagai input pada Debug Console

 switch (number) {
                        case 1:
                          print('Hadir');
                          break;
                        case 2:
                          print('Sakit');
                          break;
                        case 3:
                          print('Tidak Hadir');
                          break;
                      }

Berikut adalah hasil dari penggunaan widget Cupertino Alert Dialog

Klik pada Button yang tersedia
Alert Dialog akan muncul

Berikut hasil input pada debug console jika alert dialog di klik

Selamat Mencoba sobat Flutter 🙂