Posts

Cara Menambahkan DropdownButtonFormField pada Flutter

Assalammualaikum warahmatullahi wabarakatu sobat Uda…

Artikel kali ini kita akan membahas gimana cara membuat dropdownButtonFormField pada halaman Login. Jadi pada saat kita meng-klik username maka akan muncul 2 menu items yakni User dan Admin. Saat meng-klik salah satu menu item akan merujuk pada halaman yang berbeda. Jadi, langsung aja ikutin langkah berikut ini ya:

  • Tambahkan sebuah widget Text pada body. Pada contoh kali ini akan diimplementasikan pada text Username.
body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Stack(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 20.0, left: 5),
              child: Container(
                height: 50,
                width: 350,
                alignment: Alignment.centerLeft,
                child: Padding(
                  padding: const EdgeInsets.only(left: 16),
                  child: Text(
                    _myUsername,
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                decoration: BoxDecoration(
                    color: Color(0xFF44B379),
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    border: Border.all(color: Color(0xFF44B379))),
              ),
            ),
  • Kemudian tambahkan DropdownButtonFormField() yang didalamnya terdapat  DropdownMenuItem yaitu admin dan User
  • Value : digunakan untuk memanggil menu item saat dipanggil
  • Kemudian ubah MaterialPageRoute nya ke halaman yang akan anda tuju.

Berikut Kodingannya :

Center(
  child: SizedBox(
    width: 340,
    height: 70,
    child: Container(
      alignment: Alignment.center,
      child: DropdownButtonFormField<String>(
          decoration: InputDecoration(
              border: UnderlineInputBorder(
                  borderSide:
                      BorderSide(color: Colors.greenAccent))),
          isExpanded: true,
          items: [
            DropdownMenuItem<String>(
              child: Text('Admin'),
              value: 'one',
            ),
            DropdownMenuItem<String>(
              child: Text('User'),
              value: 'two',
            ),
          ],
          iconSize: 5,
          onChanged: (String value) {
            if (value == 'one') {
              setState(() {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => Page()));
              });
            } else if (value == 'two') {
              setState(() {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => PageSatu()));
              });
            }
          }),
    ),
  ),
),

Tampilan nya seperti berikut

Sekian dulu ya artikel kali ini semoga bermanfaat ya sobat Uda semua …

Assalammualaikum warahmatullahi Wabarakatu

1 Comment :

  1. Ridho gandha March 1, 2020 at 2:09 pm

    kereennnnnnnnnnnnnnnnnnnnnn

    Reply

Leave a Reply :

* Your email address will not be published.