Создание карусели изображения в трепете

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

Я посмотрел на класс Pageview, но это отображает только один контейнер и скрывает остальных. Но я хочу видеть Контейнер частично слева и справа. Есть ли все-таки сделать это во Флаттере и как?

Примечание: текущий контейнер всегда должен оставаться в центре

Редактировать: Darky дал очень хороший пример, но у меня есть одна проблема с его данным кодом:

Следующий ArgumentError был брошен в здание AnimatedBuilder (анимация: PageController # fc5f0 (один клиент, смещение 0.0), грязный, состояние: _AnimatedState # 1ea5c): Недопустимый аргумент (lowerLimit): не число: null -

Это бросается в позицию, где он вызывает controller.page. Кто-нибудь знает, как я могу это исправить?

Ответ 1

На самом деле, что вы хотите, это PageView.

PageView принимает PageController качестве аргумента. И этот контроллер обладает свойством viewportFraction (по умолчанию 1.0), которое в процентах представляет основной размер отображаемых страниц.

Это означает, что при значении viewportFraction, равном 0,5, главная страница будет центрирована. И вы увидите половину страницы слева и справа (если есть)

Пример:

class Carroussel extends StatefulWidget {
  @override
  _CarrousselState createState() => new _CarrousselState();
}

class _CarrousselState extends State<Carroussel> {
  PageController controller;
  int currentpage = 0;

  @override
  initState() {
    super.initState();
    controller = new PageController(
      initialPage: currentpage,
      keepPage: false,
      viewportFraction: 0.5,
    );
  }

  @override
  dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Container(
          child: new PageView.builder(
              onPageChanged: (value) {
                setState(() {
                  currentpage = value;
                });
              },
              controller: controller,
              itemBuilder: (context, index) => builder(index)),
        ),
      ),
    );
  }

  builder(int index) {
    return new AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        double value = 1.0;
        if (pageController.position.haveDimensions) {
          value = controller.page - index;
          value = (1 - (value.abs() * .5)).clamp(0.0, 1.0);
        }

        return new Center(
          child: new SizedBox(
            height: Curves.easeOut.transform(value) * 300,
            width: Curves.easeOut.transform(value) * 250,
            child: child,
          ),
        );
      },
      child: new Container(
        margin: const EdgeInsets.all(8.0),
        color: index % 2 == 0 ? Colors.blue : Colors.red,
      ),
    );
  }
}

Ответ 2

Flutter славится своей гибкостью, что означает, что ВЫ МОЖЕТЕ ДОСТИГНУТЬ, ЧТО ВЫ ХОТИТЕ

Итак, то, что вы спрашиваете, возможно. Это небольшой процесс. Вам нужно знать о GestureDetector и анимации

Эта ссылка дает очень хороший учебник по анимации. Это займет время, чтобы понять. Только не сдавайся. Coz, как только вы знаете, как это сделать, вы можете создавать чудеса.