ListView который видно только в определенной области

Question

Как создать виджет где ListView будет видно только в определенной области?

На картинке Listview элементы видны только в прямоугольнике

Почему мне нужен этот виджет?

Хочу создать такой виджет, чтобы во время скролла на определенной scrollNotification.metrics.pixels анимировать плавный выход этого виджета сверху экрана.

А чтобы элементы в этом виджете красиво сменялись (старый текст уходит вверх, новый выходит снизу) я полагаю через ListView это сделать легче всего.

Хотелось бы узнать. Возможно у этого виджета есть какое то уже существующее название и он уже есть в pub.dev.

Answer 1

То что вы ищите называется Sticky Header.

sticky_and_expandable_list

return ExpandableListView(
  builder: SliverExpandableChildDelegate<String, ExampleSection>(
      sectionList: sectionList,
      headerBuilder: (context, sectionIndex, index) =>
          Text("Header #$sectionIndex"),
      itemBuilder: (context, sectionIndex, itemIndex, index) {
        String item = sectionList[sectionIndex].items[itemIndex];
        return ListTile(
          leading: CircleAvatar(
            child: Text("$index"),
          ),
          title: Text(item),
        );
      }),
);

flutter_sticky_header

SliverStickyHeader(
  header: Container(
    height: 60.0,
    color: Colors.lightBlue,
    padding: EdgeInsets.symmetric(horizontal: 16.0),
    alignment: Alignment.centerLeft,
    child: Text(
      'Header #0',
      style: const TextStyle(color: Colors.white),
    ),
  ),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      (context, i) => ListTile(
            leading: CircleAvatar(
              child: Text('0'),
            ),
            title: Text('List tile #$i'),
          ),
      childCount: 4,
    ),
  ),
);

sticky_headers

return ListView.builder(itemBuilder: (context, index) {
  return StickyHeader(
    header: Container(
      height: 50.0,
      color: Colors.blueGrey[700],
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      alignment: Alignment.centerLeft,
      child: Text('Header #$index',
        style: const TextStyle(color: Colors.white),
      ),
    ),
    content: Container(
      child: Image.network(imageForIndex(index), fit: BoxFit.cover,
        width: double.infinity, height: 200.0),
    ),
  );
});

}

БЛОГ НА HUSL

ListView который видно только в определенной области

Ответы (1 шт):