Hide / Show Widget in Flutter using Visibility

Halo teman – teman,
Pasti pernah melihat data yang dapat di ciutkan/sembunyikan sebagian atau keseluruhan sehingga hanya memunculkan bagian judulnya saja, atau sedikit detail saja. Seperti saat membaca keterangan di saat berbelanja di aplikasi e-commerce kesayangan kalian.
Nah, kali ini kita akan membuat data yang ada dalam container menjadi di hide/show (sembunyi/tampil) hanya dengan memanfaatkan Visibility

Pertama kita memerlukan variabel boolean serta fungsi untuk menambahkan setState() pada variabel tersebut

bool visibility1 = true;  //agar saat setiap page dibuka, dalam kondisi show
bool visibility2 = false; //agar saat setiap page dibuka, dalam kondisi hide

void _changed(bool visibility, String field) {
    setState(() {
      if (field == '1') {
        visibility1 = visibility;
      }
      if (field == '2') {
        visibility2 = visibility;
      }
    });
  }

Selanjutnya, kita perlu membangun UI dan penggunaan Visibility di dalam UI yang dibangun

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Color(0xff01B6BE),
        title: Text(
          'Tes Wawancara & Biaya Masuk',
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w600,
            color: Colors.white,
          ),
        ),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: MediaQuery.of(context).size.width,
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.2),
                      spreadRadius: 0,
                      blurRadius: 1.5,
                      offset: Offset(0, 0),
                    )
                  ],
                  borderRadius: BorderRadius.circular(5),
                  color: Colors.white,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'TKIT Dar el-Iman',
                          style: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w600,
                            color: Colors.black,
                          ),
                        ),
                        InkWell(
                          onTap: () {
                            _changed(true, '1');    //fungsi _changed
                          },
                          child: visibility1
                              ? InkWell(
                            onTap: () {
                              _changed(false, '1');  //fungsi changed
                            },
                            child: Icon(
                              Icons.keyboard_arrow_up_sharp,
                              color: Colors.black,
                            ),
                          )
                              : Icon(
                            Icons.keyboard_arrow_right_sharp,
                            color: Colors.black,
                          ),
                        )
                      ],
                    ),
                    Visibility(               //penggunaan widget Visiblity
                      visible: visibility1,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SizedBox(height: 15),
                          Text(
                            'Pendaftaran : 01 -31 Januari 2020 s/d Kuota Terpenuhi\nBiaya PSB : Rp. 100.000,-\nPengambilan & Pengembalian Berkas Wawancara : 03 s/d 14 Februari 2020\nWawancara, Orangtua & Murid : Sabtu, 22 Februari 2020\nPengumuman Hasil : 02 Maret 2020\nPendaftaran Ulang : 03 s/d 12 Maret 2020\nBiaya Pendaftaran : Rp. 4.650.000,-',
                            style: TextStyle(
                              fontSize: 12,
                              color: Colors.black.withOpacity(0.75),
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 10),
              Container(
                width: MediaQuery.of(context).size.width,
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.2),
                      spreadRadius: 0,
                      blurRadius: 1.5,
                      offset: Offset(0, 0),
                    )
                  ],
                  borderRadius: BorderRadius.circular(5),
                  color: Colors.white,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'SDIT Dar el-Iman',
                          style: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w600,
                            color: Colors.black,
                          ),
                        ),
                        InkWell(
                          onTap: () {
                            _changed(true, '2');
                          },
                          child: visibility2
                              ? InkWell(
                            onTap: () {
                              _changed(false, '2');
                            },
                            child: Icon(
                              Icons.keyboard_arrow_up_sharp,
                              color: Colors.black,
                            ),
                          )
                              : Icon(
                            Icons.keyboard_arrow_right_sharp,
                            color: Colors.black,
                          ),
                        )
                      ],
                    ),
                    Visibility(
                      visible: visibility2,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SizedBox(height: 15),
                          Text('data'),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

Berikut hasil running aplikasinya :

Berikut untuk codingan lengkapnya :

import 'package:flutter/material.dart';

class PageTesWawancara extends StatefulWidget {

  @override
  _PageTesWawancaraState createState() => _PageTesWawancaraState();
}

class _PageTesWawancaraState extends State<PageTesWawancara> {
  bool visibility1 = true;
  bool visibility2 = false;

  void _changed(bool visibility, String field) {
    setState(() {
      if (field == '1') {
        visibility1 = visibility;
      }
      if (field == '2') {
        visibility2 = visibility;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Color(0xff01B6BE),
        title: Text(
          'Tes Wawancara & Biaya Masuk',
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w600,
            color: Colors.white,
          ),
        ),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: MediaQuery.of(context).size.width,
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.2),
                      spreadRadius: 0,
                      blurRadius: 1.5,
                      offset: Offset(0, 0),
                    )
                  ],
                  borderRadius: BorderRadius.circular(5),
                  color: Colors.white,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'TKIT Dar el-Iman',
                          style: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w600,
                            color: Colors.black,
                          ),
                        ),
                        InkWell(
                          onTap: () {
                            _changed(true, '1');    //fungsi _changed
                          },
                          child: visibility1
                              ? InkWell(
                            onTap: () {
                              _changed(false, '1');  //fungsi changed
                            },
                            child: Icon(
                              Icons.keyboard_arrow_up_sharp,
                              color: Colors.black,
                            ),
                          )
                              : Icon(
                            Icons.keyboard_arrow_right_sharp,
                            color: Colors.black,
                          ),
                        )
                      ],
                    ),
                    Visibility(               //penggunaan widget Visiblity
                      visible: visibility1,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SizedBox(height: 15),
                          Text(
                            'Pendaftaran : 01 -31 Januari 2020 s/d Kuota Terpenuhi\nBiaya PSB : Rp. 100.000,-\nPengambilan & Pengembalian Berkas Wawancara : 03 s/d 14 Februari 2020\nWawancara, Orangtua & Murid : Sabtu, 22 Februari 2020\nPengumuman Hasil : 02 Maret 2020\nPendaftaran Ulang : 03 s/d 12 Maret 2020\nBiaya Pendaftaran : Rp. 4.650.000,-',
                            style: TextStyle(
                              fontSize: 12,
                              color: Colors.black.withOpacity(0.75),
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 10),
              Container(
                width: MediaQuery.of(context).size.width,
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.2),
                      spreadRadius: 0,
                      blurRadius: 1.5,
                      offset: Offset(0, 0),
                    )
                  ],
                  borderRadius: BorderRadius.circular(5),
                  color: Colors.white,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'SDIT Dar el-Iman',
                          style: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w600,
                            color: Colors.black,
                          ),
                        ),
                        InkWell(
                          onTap: () {
                            _changed(true, '2');
                          },
                          child: visibility2
                              ? InkWell(
                            onTap: () {
                              _changed(false, '2');
                            },
                            child: Icon(
                              Icons.keyboard_arrow_up_sharp,
                              color: Colors.black,
                            ),
                          )
                              : Icon(
                            Icons.keyboard_arrow_right_sharp,
                            color: Colors.black,
                          ),
                        )
                      ],
                    ),
                    Visibility(
                      visible: visibility2,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SizedBox(height: 15),
                          Text('data'),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
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

LEAVE A REPLY

Please enter your comment!
Please enter your name here