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 :