Изучение нижних листов Flutter: полное руководство с примерами

Flutter, популярный кроссплатформенный набор инструментов для пользовательского интерфейса, предлагает широкий спектр мощных виджетов для создания потрясающих пользовательских интерфейсов. Одним из таких виджетов является «Нижний лист», который обеспечивает удобный способ представления пользователям дополнительного контента или действий, сохраняя при этом основной интерфейс беспрепятственным. В этой статье мы погрузимся в мир Flutter Bottom Sheets, изучая различные методы и попутно предоставляя примеры кода.

  1. showModalBottomSheet:
    Метод showModalBottomSheet— это простой способ представить нижний лист во Flutter. Он принимает объект BuildContextи функцию-конструктор, которая возвращает содержимое нижнего листа. Вот пример:
void _showBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        child: Text('This is a bottom sheet'),
      );
    },
  );
}
  1. Постоянные нижние листы.
    Постоянные нижние листы остаются видимыми даже при взаимодействии с остальной частью приложения. Чтобы создать постоянный нижний лист, вы можете использовать свойство bottomSheetвиджета Scaffold. Вот пример:
Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Container(
    child: Text('Main content'),
  ),
  bottomSheet: Container(
    height: 200,
    child: Text('This is a persistent bottom sheet'),
  ),
);
  1. DraggableScrollableSheet:
    Виджет DraggableScrollableSheetпозволяет создать нижний лист, который можно перетаскивать вверх и вниз. Это полезно, когда у вас есть большой объем контента для отображения на нижнем листе. Вот пример:
Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Container(
    child: Text('Main content'),
  ),
  bottomNavigationBar: DraggableScrollableSheet(
    initialChildSize: 0.3,
    minChildSize: 0.1,
    maxChildSize: 0.8,
    builder: (BuildContext context, ScrollController scrollController) {
      return Container(
        color: Colors.white,
        child: ListView.builder(
          controller: scrollController,
          itemCount: 50,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
        ),
      );
    },
  ),
);
  1. Настраиваемый нижний лист.
    Если вам нужен полный контроль над внешним видом и поведением нижнего листа, вы можете создать собственный нижний лист, расширив класс StatefulWidget. Это позволяет вам создать уникальный нижний лист, соответствующий вашим конкретным потребностям.