Membuat Popup dengan SimpleDialog

SimpleDialog adalah salah satu jenis dari function showDialog. 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.

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: "Halaman",
    home: new Halaman(),
    debugShowCheckedModeBanner: false,
  ));
}

class Halaman extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Show Dialog"),
        ),
// untuk pemanggilan dengan action dari button
        body: Center(
            child: MaterialButton(
              color: Colors.blueGrey,
                onPressed: (){
                  _showSimpleDialog(context);
                },
                child: Text("Click Here")
            )
        )
    );
  }

//membuat layout dalam SimpleDialog yang berisi form

  void _showSimpleDialog(context) {
    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: () {
                      Navigator.pop(context);
                    },
                  )
                ],
              ),
            ),
            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(
                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: MaterialButton(
                color: Colors.blue,
                child: Text(
                  "SIMPAN",
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            )
          ],
        );
      },
    );
  

hasil output setelah dirunning pada emulator:

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
Previous articlePengertian Container Widget
Next articleSearch View

LEAVE A REPLY

Please enter your comment!
Please enter your name here