Home Flutter Bottom Sheet Full Screen in Flutter

Bottom Sheet Full Screen in Flutter

0

Halo teman Flutter! Pada artikel kali ini saya ingin membahas tentang Bottom Sheet Full Screen in Flutter”.

Bottom Sheet adalah salah satu komponen material widget Flutter. Bottom Sheet merupakan menu pilihan yang pada umumnya disembunyikan dibagian bawah layar, yang bisa ditarik keatas untuk menampilkan menu layar tersebut.

  1. Buat Class stful baru dengan nama listFloating
class listFloating extends StatefulWidget {
  const listFloating({Key? key}) : super(key: key);

  @override
  _listFloatingState createState() => _listFloatingState();
}

class _listFloatingState extends State<listFloating> {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
}
}

2. Kemudian build UI sesuai kebutuhan

class listFloating extends StatefulWidget {
  const listFloating({Key? key}) : super(key: key);

  @override
  _listFloatingState createState() => _listFloatingState();
}

class _listFloatingState extends State<listFloating> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.only(top: 20),
        child: Column(
          children: [
            Row(
              children: [
                IconButton(
                  icon: Icon(Icons.arrow_back_ios),
                  color: Color(0xff13A89E),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
                SizedBox(
                  width: 20,
                ),
                Text(
                  'Pilih Ustadz',
                  style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                      color: Color(0xff333333)),
                ),
              ],
            ),
            Container(
              height: 600,
              child: ListView.builder(
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  physics: ClampingScrollPhysics(),
                  itemCount: floating.length,
                  itemBuilder: (context, index) {
                    return SingleChildScrollView(
                        physics: NeverScrollableScrollPhysics(),
                        child: Column(
                          children: [
                            Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: Row(
                                children: [
                                  Image(
                                    image: AssetImage(
                                        'assets/icons/${floating[index]['gambar']}'),
                                    height: 40,
                                    width: 40,
                                  ),
                                  SizedBox(
                                    width: 20,
                                  ),
                                  Text(
                                    '${floating[index]['nama']}',
                                    style: TextStyle(
                                        fontSize: 16,
                                        fontWeight: FontWeight.w500,
                                        color: Colors.black),
                                  ),
                                ],
                              ),
                            ),
                            Divider(
                              thickness: 0.5,
                              color: Color(0xff828282),
                            )
                          ],
                        ));
                  }),
            ),
          ],
        ),
      ),
    );
  }
}

3. Terakhir panggil Bottom Sheet didalam onPressed()

 onPressed: () {
              showModalBottomSheet(
                  isScrollControlled: true,
                  context: context,
                  builder: (context) => );
            },

4. Panggil class listFloating didalam builder seperti berikut

 onPressed: () {
              showModalBottomSheet(
                  isScrollControlled: true,
                  context: context,
                  builder: (context) => listFloating());
            },

Hasil Running Aplikasi :

Selamat Mencoba sobat Flutter 🙂