Блог

Каков наилучший способ создания «вложенного нижнего листа», который ведет себя следующим образом: https://dribbble.com/shots/14139422-Mobile-banking-app-interactions ?

Должен ли я использовать NestedScrollView или CustomScrollView или совершенно другой подход?

Обновить :

Это мой результат использования SlidingUpPanel , но у меня все еще есть две проблемы:

1. При перемещении панели вверх зеленые и красные контейнеры остаются за панелью и не прокручиваются из поля зрения вверху.
2. В ландшафтном режиме контейнеры находятся выше устройства, поэтому этот подход не работает. Мне нужно, чтобы панель была прикреплена к нижней части контейнеров, чтобы она была видна только при прокрутке вниз.

Код:

 SafeArea(
  child: Scaffold(
    body: SlidingUpPanel(
      minHeight: MediaQuery.of(context).size.height - 479,
      maxHeight: MediaQuery.of(context).size.height - 79,
      panel: SingleChildScrollView(
        child: Column(
          children: [Text('Sliding Panel')],
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              height: 100,
              color: Colors.green,
            ),
            Container(
              height: 300,
              color: Colors.red,
            )
          ],
        ),
      ),
    ),
  ),
);
  

Результат:

Я считаю, что есть виджет для того, что вы хотите сделать, поскольку в Flutter есть виджет для всего. вот ссылка на пакет

ПРИМЕЧАНИЕ: вы также можете установить минимальную высоту виджета при сворачивании, чтобы контролировать, какую часть виджета вы можете показывать, когда он свернут.

И вот демонстрация :