Создание карусели типа airbnb с трепещущими индикаторами линий - PullRequest
Новая
       17

Создание карусели типа airbnb с трепещущими индикаторами линий

0 голосов
/ 08 мая 2020

Я хочу добавить карусель на Airbnb в свое приложение Flutter. Со следующими функциями:

Скриншот Airbnb Carousel

  • линейные слайдеры (опционально: автомат c прокрутка)
  • эффект градиента

  • на кнопке возврата изображения

  • (необязательно) прозрачный верхний заголовок с текстом, непрозрачность которого изменяется при прокрутке вниз.

Панель приложения с переменной непрозрачностью

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

Я также создал свою собственную реализацию со следующим кодом. Это кастомная карусель, которую я создал. 

GestureDetector(
  onHorizontalDragEnd: (DragEndDetails details) {
    if (details.velocity.pixelsPerSecond.dx > 0) {
      _preve();
    } else if (details.velocity.pixelsPerSecond.dx < 0) {
      _next();
    }
  },
  child: FadeAnimation(
    .8,
    Container(
      width: double.infinity,
      height: 0.6 * screenHeight,
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage(imagesList[currentIndex][0]),
              fit: BoxFit.cover)),
      child: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.bottomRight,
                colors: [
              Colors.grey[700].withOpacity(.9),
              Colors.grey.withOpacity(.0),
            ])),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            FadeAnimation(
                1,
                Container(
                  width: 90,
                  margin: EdgeInsets.only(bottom: 60),
                  child: Row(
                    children: _buildIndicator(),
                  ),
                ))
          ],
        ),
      ),
    ),
  ),
),

Пожалуйста, укажите мне правильное направление:

  • Если у нас есть аналогичный плагин, который можно настроить для получения желаемого эффекта .
  • как реализовать это с нуля.
...