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

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());
  },
),

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

Blogda daha çok örnek yapıları göstermeye çalışacağım. Sorularınızı yorum bölümünden iletebilirsiniz.

• Flutter - Wikipedia