Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang Custom Dialog in Flutter. Dialog adalah sebuah widget pada flutter yang digunakan untuk menampilkan pesan secara pop up pada halaman aplikasi.

Step 1. Buat Raised Button

Buat raised button dengan menambahkan code seperti berikut

Container(                         child: RaisedButton(                           shape: RoundedRectangleBorder(                             borderRadius: BorderRadius.circular(10),                           ),                           textColor: Colors.white,                           color: Color(0xffF5A31C),                           child: Align(                             alignment: Alignment.center,                             child: Text(                               ‘Lakukan Penilaian’,                               style: TextStyle(                                 fontWeight: FontWeight.w400,                                 fontFamily: “Nunito”,                                 fontSize: 12,                               ),                             ),                           ),                           onPressed: () {},                         ),                       ),

Step 2. Tambahkan showDialog

Tambahkan fuction showDialog() pada onPressed Raised Button seperti berikut

showDialog(                                 context: context,                                 builder: (BuildContext context) {                                   return Dialog(                                     shape: RoundedRectangleBorder(                                       borderRadius: BorderRadius.circular(10),                                     ),                                     elevation: 0,                                     backgroundColor: Colors.transparent,                                     child: _penilaian(context),                                   );                                 });

Step 3. Tampilan Custom Dialog

Buat tampilan custom dialog dengan menambahkan code seperti berikut

_penilaian(BuildContext context) => Container(         height: 250,         decoration: BoxDecoration(           color: Color(0xffDEE6E8),           shape: BoxShape.rectangle,           borderRadius: BorderRadius.all(             Radius.circular(10),           ),         ),         child: Column(           children: [             Container(               child: Padding(                 padding: EdgeInsets.all(10),                 child: Text(                   “Silahkan Pilih”,                   textAlign: TextAlign.center,                   style: TextStyle(                     fontFamily: “Poppins”,                     fontSize: 20,                     color: Colors.white,                     fontWeight: FontWeight.w600,                   ),                 ),               ),               width: double.infinity,               decoration: BoxDecoration(                 color: Color(0xff267AC0),                 shape: BoxShape.rectangle,                 borderRadius: BorderRadius.only(                   topLeft: Radius.circular(10),                   topRight: Radius.circular(10),                 ),               ),             ),             SizedBox(               height: 20,             ),             Padding(               padding: EdgeInsets.all(5),               child: Column(                 children: [                   Container(                     width: 260,                     decoration: BoxDecoration(                       color: Colors.white,                       borderRadius: BorderRadius.circular(10),                     ),                     child: TextFormField(                       decoration: InputDecoration(                         hintText: “KD”,                         border: InputBorder.none,                         contentPadding: EdgeInsets.all(10),                         suffixIcon: Icon(Icons.keyboard_arrow_down),                       ),                     ),                   ),                   SizedBox(                     height: 10,                   ),                   Container(                     width: 260,                     decoration: BoxDecoration(                       color: Colors.white,                       borderRadius: BorderRadius.circular(10),                     ),                     child: TextFormField(                       decoration: InputDecoration(                         hintText: “Indikator”,                         border: InputBorder.none,                         contentPadding: EdgeInsets.all(10),                         suffixIcon: Icon(Icons.keyboard_arrow_down),                       ),                     ),                   ),                   SizedBox(                     height: 10,                   ),                   Container(                     width: 260,                     child: RaisedButton(                       shape: RoundedRectangleBorder(                           borderRadius: BorderRadius.circular(10)),                       textColor: Colors.white,                       color: Color(0xff267AC0),                       child: Text(‘Lakukan Penilaian’),                       onPressed: () {},                     ),                   ),                 ],               ),             ),           ],         ),       );

Hasil Run : 

Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba 🙂