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'),
],
),
),
],
),
),
],
),
),
),
);
}
}