Эффект смахивания тикток: как вертикально прокручивать в полноэкранном режиме?

Question

Я пытаюсь создать галерею с эффектом смахивания, похожим на тикток.

Это мой начальный экран:

Когда пользователь проводит пальцем по экрану, полноэкранное фото собаки должно выглядеть так:

Answer 1

привык, но хорошо, что по состоянию на сентябрь 2021 года. В примере он работает, но перестает прокручивать элемент 1 с данными API (я не знаю, почему).

Итак, основываясь на одном из комментариев, это сработало для Сенфуки (меня):

       PageView.builder(
        scrollDirection: Axis.vertical,
        itemCount: widget.products.length,
        itemBuilder: (context, index) {
          try {
            return ProductPage(
              widget.products[index],
              isHome: false,
            );
          } catch (e) {
            print(e);
            return Container();
          }
        });

Answer 2

Попробуйте пакет tiktoklikescroller

Реализация вертикальной полноэкранной прокрутки, которая фиксируется, как приложение TikTok.

Пример :

      import 'package:flutter/material.dart';
import 'package:tiktoklikescroller/tiktoklikescroller.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<Color> colors = <Color>[Colors.red, Colors.blue, Colors.yellow];
    return MaterialApp(
      home: Scaffold(
        body: TikTokStyleFullPageScroller(
          contentSize: colors.length,
          swipeThreshold: 0.2,
          // ^ the fraction of the screen needed to scroll
          swipeVelocityThreshold: 2000,
          // ^ the velocity threshold for smaller scrolls
          animationDuration: const Duration(milliseconds: 300),
          // ^ how long the animation will take
          builder: (BuildContext context, int index) {
            return Container(
                color: colors[index],
                child: Text(
                  '$index',
                  style: const TextStyle(fontSize: 48, color: Colors.white),
                ),
              );
          },
        ),
      ),
    );
  }
}

Выход :

Надеюсь, это будет полезно

Answer 3

Вы можете попробовать Awesome_scroller

Он синхронизирует анимацию с PageView. Вы можете добавить любой дочерний виджет в Awesome Scroller и прокручивать список по вертикали или по горизонтали.

вертикальный горизонтальный

      AwesomeScroller(
          itemCount: 3,
          scrollDirection: Axis.verticle,
          onPageChanged: (index) {
            setState(() {
              pageIndex = index;
              print(index.toString());
            });
          },
          widget: Container(
            width: double.infinity,
            decoration: const BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage(
                      "IMAGE_URL_HERE"),
                  fit: BoxFit.cover),
            ),
          )),

Answer 4

спасибо за ваше предложение. Почти работает :)

Я пробовал, но получаю сообщение об ошибке: RenderViewport ожидал дочернего типа RenderSliver, но получил потомок типа RenderStack.

Итак, согласно документации, он должен находиться внутри Sliver. Я попытался поместить его в SliverPadding, где у меня есть заголовок. А также попробовал разместить его в независимом SliverToBoxAdapter.

Но я могу прокручивать экран с отверстиями, только перетаскивая область заголовка. А затем, если я снова прокручу вниз, заголовок и AppBar больше никогда не появятся.

Как я могу прокрутить экран с отверстиями и прокрутить его назад?

          SliverPadding(
      padding: const EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 5.0),
      sliver: SliverToBoxAdapter(
        child: Column(
          children: [
            Container(
              height: 200.0,
              color: Colors.black12,
              child: Text('Header', style: TextStyle(fontSize: 30),),
            ),

            Container(
              height: MediaQuery.of(context).size.height,
              child: TikTokStyleFullPageScroller(
                contentSize: colors.length,
                swipeThreshold: 0.2,
                // ^ the fraction of the screen needed to scroll
                swipeVelocityThreshold: 2000,
                // ^ the velocity threshold for smaller scrolls
                animationDuration: const Duration(milliseconds: 300),
                // ^ how long the animation will take
                builder: (BuildContext context, int index) {
                  return Container(
                    color: colors[index],
                    child: Text(
                      '$index',
                      style: const TextStyle(fontSize: 48, color: Colors.white),
                    ),
                  );
                },
              ),
            ),

          ],
        ),
      ),
    ),