Creating Image Carousel in Flutter

Question

How can i create an Carousel of Containers Like the example below?

I looked at Pageview class but this only displays one Container and hides the others. But i want to see the Container partly on the left and right too. Is there anyway to do this in Flutter and how?

Note: The current Container should always stay in the center

Edit: Darky gave an very good Example but i have one problem with his given code:

The following ArgumentError was thrown building AnimatedBuilder(animation: PageController#fc5f0(one client, offset 0.0), dirty, state: _AnimatedState#1ea5c): Invalid argument (lowerLimit): not a number: null –

This gets thrown at the Position where he calls controller.page. Does anyone know how i can fix this?

Answer 1

This solved my problem:

Future.delayed(const Duration(milliseconds: 20), () {

  setState(() {
    _pageController.animateToPage(0, duration: Duration(milliseconds: 1), curve: Curves.bounceIn);
  });

});

Answer 2

Didn't had much time to investigate, but the AnimatedBuilder is called X times equal to number of visible children. Dimensions are not available during first frame, so controller.page will throw Exception. Correct formula to compute animation offsets during first frame is (caution: it just worked for me flawlessly, keep your implementation in mind):

        builder: (context, child) {
          double value = _controller.position.haveDimensions
              ? _controller.page! - index
              : index.toDouble();
          value =  Curves.easeInOut.transform(
              (1 - (value.abs() * .4)).clamp(0.0, 1.0)
          );

          return Center(
            child: Container(
              height: value * widget.height,
              width: value * widget.width,
              padding: EdgeInsets.symmetric(horizontal: 15),
              child: child,
            ),
          );
        },