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

Actually what you want is PageView.

PageView accept a PageController as argument. And that controller possess a viewportFraction property (default to 1.0) which represent in percent the main-size of displayed pages.

Which means that with a viewportFraction of 0.5, the main page will be centered. And you'll see half a page on both left and right (if there's one)

Example :

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

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

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

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

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

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

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

Answer 2

This solved my problem:

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

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

});

Answer 3

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,
            ),
          );
        },