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

Метод 1: использование виджета ListView.separated
Виджет ListView.separatedпозволяет вам определять собственные разделители между элементами списка. Указав построитель разделителей и установив 0в качестве счетчика разделителей, мы можем эффективно добавить статический виджет в начале списка. Вот пример:

ListView.separated(
  itemBuilder: (context, index) {
    if (index == 0) {
      // Return your static widget here
      return Container(
        // Static widget content
      );
    }
// Return dynamic list items
    return ListTile(
      // Dynamic list item content
    );
  },
  separatorBuilder: (context, index) => const Divider(),
  itemCount: dynamicItemCount + 1,
)

Метод 2: использование пользовательского прокручиваемого виджета
Другой подход заключается в создании собственного прокручиваемого виджета, который сочетает в себе статический виджет и динамический список. Этого можно добиться путем вложения виджетов, таких как Column, ListViewили CustomScrollView. Вот пример использования Column:

ListView.builder(
  itemCount: dynamicItemCount,
  itemBuilder: (context, index) => ListTile(
    // Dynamic list item content
  ),
).build(context);
Column(
  children: [
    // Static widget
    Container(
      // Static widget content
    ),
    // Dynamic list
    Expanded(
      child: Scrollable(
        viewportBuilder: (context, position) => builder.build(context),
      ),
    ),
  ],
)

Метод 3: использование виджета Stack
Виджет Stackпозволяет накладывать несколько виджетов друг на друга. Разместив статический виджет внизу, а динамический список сверху, мы можем добиться желаемого эффекта. Вот пример:

Stack(
  children: [
    // Static widget
    Positioned(
      top: 0,
      left: 0,
      right: 0,
      child: Container(
        // Static widget content
      ),
    ),
    // Dynamic list
    ListView.builder(
      itemCount: dynamicItemCount,
      itemBuilder: (context, index) => ListTile(
        // Dynamic list item content
      ),
    ),
  ],
)

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

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