[Flutter][39] Membuat Popup dengan SimpleDialog

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Wednesday, 02 Oct 2019

Hello world,

SimpleDialog adalah salah satu jenis dari function showDialog yang sebelumnya pernah saya bahas yaitu AlertDialog. Perbedaannya hanya ada pada action bar nya dimana SimpleDialog tidak memiliki action button. Jadi bisa dibilang SimpleDialog hanya kotak popup saja yang bisa kita isi dengan konten dan tombol. SimpleDialog biasanya digunakan untuk membuat popup yang berisi form atau opsi-opsi lainnya.

Contoh bentuknya sebagai berikut:

void _showSimpleDialog() {
showDialog(
context: context,
builder: (context) {
return SimpleDialog(
children: <Widget>[
                //widget di sini//
],
);
}
)
}

SimpleDialog memiliki children yang dapat diisi dengan lebih dari satu widget. jadi kita bebas membuat layout dalam SimpleDialog. Berikut contoh yang saya buat (SimpleDialog yang berisi form).

void _showSimpleDialog() {
showDialog(
context: context,
builder: (context) {
return SimpleDialog(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
children: <Widget>[
Expanded(
child: Text(
"Tambah Pengguna",
style: TextStyle(fontSize: 20.0),
),
),
IconButton(
icon: Icon(Icons.close),
onPressed: () {
_dismisspopup();
},
)
],
),
),
Divider(),
Padding(
padding: EdgeInsets.all(10.0),
child: Text(
"Nama Lengkap",
),
),
Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: TextField(
style: new TextStyle(
fontSize: 14.0, height: 1.0, color: Colors.black),
decoration: new InputDecoration(
hintText: "Input nama lengkap",
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(3.0)),
contentPadding: const EdgeInsets.symmetric(
vertical: 14.0, horizontal: 15.0),
),
),
),
Padding(
padding: EdgeInsets.all(10.0),
child: Text(
"Kontak",
),
),
Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: TextField(
controller: _kontakpasangan,
style: new TextStyle(
fontSize: 14.0, height: 1.0, color: Colors.black),
decoration: new InputDecoration(
hintText: "Input kontak",
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(3.0)),
contentPadding: const EdgeInsets.symmetric(
vertical: 14.0, horizontal: 15.0),
),
),
),

Padding(
padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0),
child: RaisedButton(
color: Colors.blue,
child: Text(
"SIMPAN",
style: TextStyle(color: Colors.white),
),
onPressed: () {

},
),
)
],
);
},
);
}

Kemudian tinggal kita panggil dengan action dari button sebagai berikut.

import 'package:flutter/material.dart';

class Homepage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Show Dialog"),
),
body: Center(
child: RaisedButton(
onPressed: (){
_showSimpleDialog();
},
child: Text("Click Here")
)
)
);
}
}


Selamat Mencoba :)