При разработке приложения Flutter часто встречаются сценарии, в которых вам необходимо разместить виджет перед ListView. Это может быть полезно для отображения заголовков, строк поиска или любого другого виджета, который должен отображаться над прокручиваемым списком. В этой статье мы рассмотрим различные методы достижения этой цели во Flutter, а также приведем примеры кода.

Метод 1: использование виджета столбца
Один простой подход — обернуть предыдущий виджет и ListView в виджет столбца. Виджет «Столбец» позволяет размещать виджеты вертикально. Вот пример:

Column(
  children: [
    // Widget before ListView
    Text('Header'),
    // ListView
    ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('Item $index'),
        );
      },
    ),
  ],
)

Метод 2: Пользовательский ScrollView
Другой способ добиться желаемого макета — использовать виджет CustomScrollView. CustomScrollView — это универсальный виджет, позволяющий создавать сложные эффекты прокрутки. Вот пример:

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(
      child: Text('Header'),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
        childCount: 10,
      ),
    ),
  ],
)

Метод 3: Виджет «Стек»
Виджет «Стек» позволяет размещать виджеты друг на друге. Используя его, вы можете разместить предыдущий виджет над ListView. Вот пример:

Stack(
  children: [
    ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('Item $index'),
        );
      },
    ),
    Positioned(
      top: 0,
      left: 0,
      right: 0,
      child: Text('Header'),
    ),
  ],
)

Метод 4: SliverAppBar
Если вы предпочитаете более продвинутый подход с эффектом прокрутки, вы можете использовать виджет SliverAppBar. Этот виджет предоставляет панель приложения, которая может расширяться и сворачиваться при прокрутке пользователем. Вот пример:

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('Header'),
      floating: true,
      pinned: true,
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
        childCount: 10,
      ),
    ),
  ],
)

В этой статье мы рассмотрели несколько способов размещения виджета перед ListView в приложении Flutter. Если вам нужен простой макет или более продвинутый эффект прокрутки, эти методы обеспечат гибкость для достижения желаемого дизайна пользовательского интерфейса. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует требованиям вашего приложения.