[Flutter][18] AlertDialog

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, 24 Apr 2019

Hello world,

Ini akan menjadi postingan yang pendek, hehe. Karena hanya membahas mengenai alertdialog dan cara penggunaannya di dalam flutter. Pertama yang akan kita buat adalah sebuah button yang jika diklik nanti akan menampilkan sebuah alertdialog. Perhatikan contoh di bawah ini.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatefulWidget {
@override
_MyappState createState() => _MyappState();
}

class _MyappState extends State {
void _tampilkanalert() {
AlertDialog alertDialog = new AlertDialog(
content: new Container(
height: 200.0,
child: new Center(
child: new Text("Hello Ini Alert"),
),
),
);
showDialog(context: context, child: alertDialog);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: RaisedButton(
child: Text(
"Tampilkan",
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
onPressed: () {
_tampilkanalert();
},
),
),
),
);
}
}

Dari contoh di atas dapat dilihat jika ada sebuah button yang memiliki action onpressed mengarah pada void _tampilkanalert().  Cukup sederhana bukan? Selanjutnya kita dapat menambahkan action button di dalam alert seperti berikut.

void _tampilkanalert() {
AlertDialog alertDialog = new AlertDialog(
content: new Container(
height: 200.0,
child: new Center(
child: new Text("Hello Ini Alert"),
),
),
actions: [
FlatButton(
child: Text('Tutup'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
showDialog(context: context, child: alertDialog);
}

Di dalam action button memiliki fungsi jika diklik akan menutup alert. Lalu untuk menghalangi agar alertdialog tidak tertutup jika pengguna menyentuh bagian layar di luar alertdialog kita dapat menggunakan  barrierDismissible yang kita beri nilai false pada showDialog. Sehingga full codenya akan menjadi seperti ini.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatefulWidget {
@override
_MyappState createState() => _MyappState();
}

class _MyappState extends State {
void _tampilkanalert() {
AlertDialog alertDialog = new AlertDialog(
content: new Container(
height: 200.0,
child: new Center(
child: new Text("Hello Ini Alert"),
),
),
actions: [
FlatButton(
child: Text('Tutup'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
showDialog(context: context, child: alertDialog, barrierDismissible: false,);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: RaisedButton(
child: Text(
"Tampilkan",
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
onPressed: () {
_tampilkanalert();
},
),
),
),
);
}
}

Selamat mencoba :)