Halo sobat Flutter! Pada artikel kali ini saya ingin membahas tentang “Expandable List (ExpansionTile & ListTile”.
- Buat Frontendnya terlebih dahulu. Disini saya akan membuat list beberapa bendera negara
import 'package:flutter/material.dart';
import 'package:iqwar_student/hometwo/homee.dart';
class Pengaturan extends StatefulWidget {
const Pengaturan({Key? key}) : super(key: key);
@override
_PengaturanState createState() => _PengaturanState();
}
class _PengaturanState extends State<Pengaturan> {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0.500,
brightness: Brightness.light,
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
color: Color(0xff13A89E),
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Homee()));
},
),
title: Text(
"Pengaturan",
style: TextStyle(
color: Colors.black, fontSize: 18, fontFamily: 'Poppins'),
),
centerTitle: true,
),
body: Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 33),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
height: 50,
decoration: BoxDecoration(
border: Border.all(color: Color(0XFFF2F2F2), width: 2),
borderRadius: BorderRadius.circular(10),
color: Colors.white),
child: Padding(
padding: const EdgeInsets.only(left: 10, right: 13),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Ubah Password",
style: TextStyle(
fontSize: 12,
color: Color(0xff13A89E),
),
),
Icon(
Icons.arrow_forward_ios_outlined,
color: Colors.black,
size: 24,
)
],
),
),
),
SizedBox(
height: 15,
),
Text(
"Bahasa",
style: TextStyle(fontSize: 12, color: Color(0xff13A89E)),
),
Container(
width: double.infinity,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.transparent, width: 2),
borderRadius: BorderRadius.circular(10),
color: Colors.transparent),
),
],
),
),
);
}
}
2. Kemudian buat class baru dengan nama BuildText
Widget buildText(BuildContext context) => Theme(
data: Theme.of(context).copyWith(
dividerColor: Colors.transparent,
),
child: ExpansionTile(
title: Text(
"Indonesia",
style: TextStyle(fontSize: 14),
),
leading: Image(
image: AssetImage('assets/icons/indonesia.png'),
height: 20,
width: 20,
),
children: [
Padding(
padding: const EdgeInsets.only(left: 15, right: 13),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Image(
image: AssetImage('assets/icons/us.png'),
height: 20,
width: 20,
),
SizedBox(
width: 35,
),
Text(
"United States",
style: TextStyle(fontSize: 14, height: 1.4),
)
],
),
],
),
),
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(left: 15, right: 13),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Image(
image: AssetImage('assets/icons/uea.png'),
height: 20,
width: 20,
),
SizedBox(
width: 35,
),
Text(
"Uni Emirat Arab",
style: TextStyle(fontSize: 14, height: 1.4),
)
],
),
],
),
),
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(left: 15, right: 13),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Image(
image: AssetImage('assets/icons/jerman.png'),
height: 20,
width: 20,
),
SizedBox(
width: 35,
),
Text(
"Germany",
style: TextStyle(fontSize: 14, height: 1.4),
)
],
),
],
),
),
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(left: 15, right: 13),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Image(
image: AssetImage('assets/icons/rusia.png'),
height: 20,
width: 20,
),
SizedBox(
width: 35,
),
Text(
"Russia",
style: TextStyle(fontSize: 14, height: 1.4),
)
],
),
],
),
),
],
),
);3. Kemudian costum pada container dan panggil BuildText didalamnya
Container(
width: double.infinity,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.transparent, width: 2),
borderRadius: BorderRadius.circular(10),
color: Colors.transparent),
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Column(
children: [buildText(context)],
),
),
),Berikut adalah tampilannya :
Berikut codingan lengkapnya :
import 'package:flutter/material.dart';
import 'package:iqwar_student/hometwo/homee.dart';
class Pengaturan extends StatefulWidget {
const Pengaturan({Key? key}) : super(key: key);
@override
_PengaturanState createState() => _PengaturanState();
}
class _PengaturanState extends State<Pengaturan> {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0.500,
brightness: Brightness.light,
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
color: Color(0xff13A89E),
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Homee()));
},
),
title: Text(
"Pengaturan",
style: TextStyle(
color: Colors.black, fontSize: 18, fontFamily: 'Poppins'),
),
centerTitle: true,
),
body: Padding(
padding: EdgeInsets.only(left: 20, right: 20, top: 33),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
height: 50,
decoration: BoxDecoration(
border: Border.all(color: Color(0XFFF2F2F2), width: 2),
borderRadius: BorderRadius.circular(10),
color: Colors.white),
child: Padding(
padding: const EdgeInsets.only(left: 10, right: 13),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Ubah Password",
style: TextStyle(
fontSize: 12,
color: Color(0xff13A89E),
),
),
Icon(
Icons.arrow_forward_ios_outlined,
color: Colors.black,
size: 24,
)
],
),
),
),
SizedBox(
height: 15,
),
Text(
"Bahasa",
style: TextStyle(fontSize: 12, color: Color(0xff13A89E)),
),
Container(
width: double.infinity,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.transparent, width: 2),
borderRadius: BorderRadius.circular(10),
color: Colors.transparent),
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Column(
children: [buildText(context)],
),
),
),
],
),
),
);
}
Widget buildText(BuildContext context) => Theme(
data: Theme.of(context).copyWith(
dividerColor: Colors.transparent,
),
child: ExpansionTile(
title: Text(
"Indonesia",
style: TextStyle(fontSize: 14),
),
leading: Image(
image: AssetImage('assets/icons/indonesia.png'),
height: 20,
width: 20,
),
children: [
Padding(
padding: const EdgeInsets.only(left: 15, right: 13),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Image(
image: AssetImage('assets/icons/us.png'),
height: 20,
width: 20,
),
SizedBox(
width: 35,
),
Text(
"United States",
style: TextStyle(fontSize: 14, height: 1.4),
)
],
),
],
),
),
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(left: 15, right: 13),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Image(
image: AssetImage('assets/icons/uea.png'),
height: 20,
width: 20,
),
SizedBox(
width: 35,
),
Text(
"Uni Emirat Arab",
style: TextStyle(fontSize: 14, height: 1.4),
)
],
),
],
),
),
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(left: 15, right: 13),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Image(
image: AssetImage('assets/icons/jerman.png'),
height: 20,
width: 20,
),
SizedBox(
width: 35,
),
Text(
"Germany",
style: TextStyle(fontSize: 14, height: 1.4),
)
],
),
],
),
),
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(left: 15, right: 13),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Image(
image: AssetImage('assets/icons/rusia.png'),
height: 20,
width: 20,
),
SizedBox(
width: 35,
),
Text(
"Russia",
style: TextStyle(fontSize: 14, height: 1.4),
)
],
),
],
),
),
],
),
);
}