Customize Dialog Position

Halo teman – teman, kali ini kita akan membahas bagaimana caranya untuk mengatur posisi dari dialog (pop up) yang tampil. Dengan mengatur posisi dari dialog, jadi posisinya tidak hanya berada selalu di tengah tetapi juga bisa di dekat posisi button yang di klik. Atau bahkan di bawah, atau di sudut kanan.

Selanjutnya pada page main kita perlu menambahkan Button seperti berikut :

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey,
        body: SafeArea(
          child: MaterialButton(
            color: Colors.amber,
            onPressed: (){},
            child: Text('Klik'),
          ),
        ),
    );
  }
}

Jika sudah, kita perlu menambahkan showDialog pada onPressed di dalam MaterialButton

 onPressed: (){
              showDialog(
                  barrierDismissible: false,
                  context: context,
                  builder: (context) {
                    return Dialog();
                  });
            },

Di dialog kali ini, fungsi dari barrierDismissible bernilai false agar dialog tidak akan tertutup kecuali saat menekan button closed di Dialog.
Berikut untuk code pada return Dialog();

return Dialog(
                      insetPadding: EdgeInsets.only(bottom: 400, right: 100, left: 26),
                      child: Container(
                        width: MediaQuery.of(context).size.width,
                        padding: EdgeInsets.only(top: 25, bottom: 25, right: 10, left: 22),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Container(
                              height: 90,
                              width: 90,
                              color: Colors.blue,
                              child: Center(child: Text('Ini Dialog')),
                            ),
                            SizedBox(height: 36),
                            MaterialButton(
                              minWidth: 246,
                              onPressed: () {
                                Navigator.pop(context);
                              },
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(4),
                              ),
                              color: Colors.red,
                              child: Text(
                                'Tutup',
                                style: TextStyle(
                                  fontSize: 12,
                                  fontWeight: FontWeight.bold,
                                  fontFamily: 'Roboto',
                                  color: Colors.white,
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    );

Nah, untuk mengatur posisi dialog kita dapat menggunakan insetPadding sehingga kita dapat mengatur posisi yang kita inginkan, di sini posisi dialog akan tampil di dekat Button Klik seperti pada video berikut :

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here