Expandable List (ExpansionTile & ListTile) in Flutter

Halo sobat Flutter! Pada artikel kali ini saya ingin membahas tentang “Expandable List (ExpansionTile & ListTile”.

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