ExpansionTile after choosing an item

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.

  1. 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 🙂

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