Halo teman Flutter! Pada artikel kali ini saya ingin membahas tentang “Collapsing ExpansionTile after choosing an item”.
Disini saya akan menampilkan bagaimana cara memilih item dengan menggunakan ExpansionTile.
ExpansionTile merupakan sebuah widget pada Flutter yang menghasilkan daftar dua level atau multi level. Ketika daftar level diciutkan atau ditampilkan, maka item yang dipilih tampil pada layar Android anda.
- Buat variabel untuk ExpansionTile seperti code dibawah ini diatas @override.
int? _key; // variabel key
_collapse() { // variabel collapse
int? newKey;
do {
_key = new Random().nextInt(10000);
} while (newKey == _key);
}2. Tambahkan variabel GlobalKey(),
final GlobalKey<_DetailCustomerState> expansionTile = new GlobalKey();3. Terakhir buat initState kemudian panggil variabel collapse();
@override
void initState() {
super.initState();
_collapse();
}4. Kemudian buat container untuk menampung daftar multi level.
Container(
decoration: BoxDecoration(
border: Border.all(color: Color(0xff263238), width: 0.5),
color: Colors.white),
),5. buat child dari Container dan tambahkan widget ExpansioTile
Container(
decoration: BoxDecoration(
border: Border.all(color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ExpansionTile(), //widget ExpansionTile
),6. Tambahkan yang dibutuhkan ExpansionTile seperti key, title, initiallyExpanded. Kemudian panggil children.
Container(
decoration: BoxDecoration(
border: Border.all(color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ExpansionTile(
title: new Text(this.foos), //panggil variabel title
key: new Key(_key.toString()), //panggil variabel key
initiallyExpanded: false,
trailing: Icon(
Icons.arrow_drop_down,
color: Color(0xff00AB9E),
size: 40,
),
children: <Widget>[
],
),
),7.Buat widget Container serta custom sesuai kebutuhan untuk multi level.
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 1",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
);
},
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 2",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
);
},
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 3",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
);
},
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 4",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
);
},
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 5",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
);
},
),
),8. Terakhir panggil onTap: serta panggil setState didalam, dan panggil variabel collapse();
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 1",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
onTap: () { //tambahkan disini ya
setState(() {
this.foos = 'Lorem Ipsum 1';
_collapse();
});
},
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 2",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
onTap: () { //tambahkan disini ya
setState(() {
this.foos = 'Lorem Ipsum 2';
_collapse();
});
},
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 3",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
onTap: () { //tambahkan disini
setState(() {
this.foos = 'Lorem Ipsum 3';
_collapse();
});
},
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 4",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
onTap: () { //tambahkan disini
setState(() {
this.foos = 'Lorem Ipsum 4';
_collapse();
});
},
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 5",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
onTap: () { //tambahkan disini
setState(() {
this.foos = 'Lorem Ipsum 5';
_collapse();
});
},
),
),Berikut adalah hasil running dari collapsing ExpansionTile setelah memilih item level.
Berikut Source Code lengkapnya ya :
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:u_cast_app/ui/listpage/detailcustomer/tab_schdule.dart';
class DetailCustomer extends StatefulWidget {
@override
_DetailCustomerState createState() => _DetailCustomerState();
}
class _DetailCustomerState extends State<DetailCustomer> {
final GlobalKey<_DetailCustomerState> expansionTile = new GlobalKey();
int? _key;
_collapse() {
int? newKey;
do {
_key = new Random().nextInt(10000);
} while (newKey == _key);
}
@override
void initState() {
super.initState();
_collapse();
}
bool? _isChecked = false;
String foos = 'Pilih Pesan Yang Ingin Kamu Kirim';
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(),),
body: Padding(
padding: EdgeInsets.all(23),
child: SingleChildScrollView(
child: Column(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ExpansionTile(
title: new Text(this.foos),
key: new Key(_key.toString()),
initiallyExpanded: false,
trailing: Icon(
Icons.arrow_drop_down,
color: Color(0xff00AB9E),
size: 40,
),
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 1",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
onTap: () {
setState(() {
this.foos = 'Lorem Ipsum 1';
_collapse();
});
},
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 2",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
onTap: () {
setState(() {
this.foos = 'Lorem Ipsum 2';
_collapse();
});
},
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 3",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
onTap: () {
setState(() {
this.foos = 'Lorem Ipsum 3';
_collapse();
});
},
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 4",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
onTap: () {
setState(() {
this.foos = 'Lorem Ipsum 4';
_collapse();
});
},
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff263238), width: 0.5),
color: Colors.white),
child: ListTile(
title: Text(
"Lorem Ipsum 5",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Colors.black),
),
onTap: () {
setState(() {
this.foos = 'Lorem Ipsum 5';
_collapse();
});
},
),
),
],
),
),
],
),
),
),
),
);
}
}
Selamat mencoba teman Flutter 🙂