Flutter Dersleri #1 - BottomSheet Kullanımı

Flutter - BottomSheet Kullanımı

Flutter serisinin ilk örneğinde BottomSheet kullanımını öğreneceğiz.

BottomSheet'i gayet basit görünen, widget döndüren bir fonksiyon ile kullanacağız.

 
import 'package:flutter/material.dart';

// ignore: missing_return
Widget mBottomSheet(context, widget) {
  showModalBottomSheet(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(32.0),
          topRight: Radius.circular(32.0),
        ),
      ),
      context: context,
      builder: (BuildContext bc) {
        return SafeArea(
          child: widget,
        );
      });
}
mBottomSheet fonksiyonu

Bloktaki mBottomSheet fonsiyonuna parametre olarak context ve içinde göstermek istediğimiz widget'ı parametre olarak veriyoruz.
Asıl işi yapan showModalBottomSheet widget'ını kullanarak bottomsheet'i göstereceğiz. Ben Shape vermeyi tercih ettim, siz burayı silebilirsiniz. context parametresine bize dönen context değerini verdik. builder ise bize gelen widget parametresinin ekranda yaratılmasını sağlıyor.
Burda değinmek istediğim bir widget ise SafeArea.

SafeArea widget'ı, navigation bar'a sahip cihazlarda alttan çıkan widgetların navigation bar tarafından bozulmasını engeller.

IconButton(
  icon: Icon(Icons.more_vert),
  onPressed: () {
    mBottomSheet(context, _bottomSheetWidget());
  },
),
mBottomSheet fonksiyonunu tetikleyen IconButton
Widget _bottomSheetWidget() => Container(
        child: Wrap(
          children: <Widget>[
            ListTile(
                leading: Icon(Icons.music_note),
                title: Text('Music play'),
                onTap: () => {}),
            ListTile(
              leading: Icon(Icons.videocam),
              title: Text('Video cam'),
              onTap: () => {},
            ),
            ListTile(
              leading: Icon(Icons.close),
              title: Text('Dismiss bottomsheet'),
              onTap: () => {Navigator.pop(context)},
            ),
          ],
        ),
      );
BottomSheet içinde gösterilecek olan widget
Blogda daha çok örnek yapıları göstermeye çalışacağım. Sorularınızı yorum bölümünden iletebilirsiniz.
Kaynak:
Bu postu paylaş:

0 yorum

Yorum yapmak için giriş yapmanız gerekmektedir. Giriş yap
Henüz hesabınız yoksa 20 saniyenizi ayırıp kayıt olabilirsiniz. Kaydol