Flutter : PageView loosing Carousel while changing the screen

Question

I'm using below code to Carousel using PageView

PageView.builder(
                              onPageChanged: (value) {
                                setState(() {
                                  currentpage = value;
                                });
                              },
                              controller: controller,
                              itemCount: data.length,
                              itemBuilder: (context, index) {
                                return GestureDetector(
                                  onTap: () {
                                    debugPrint('Nilesh Rathod $index');
                                    if (index == 0) {
                                      Navigator.push(
                                              context,
                                              PageTransition(
                                                  type: PageTransitionType
                                                      .rightToLeft,
                                                  child: DetailPage()))
                                          .then((value) {
                                        debugPrint('nilu pilu');
                                        controller.jumpToPage(0);
                                      });
                                    }
                                  },
                                  child: 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 Align(
                                        alignment: Alignment.topCenter,
                                        child: SizedBox(
                                          height:
                                              Curves.easeOut.transform(value) *
                                                  300,
                                          width:
                                              Curves.easeOut.transform(value) *
                                                  250,
                                          child: child,
                                        ),
                                      );
                                    },
                                    child: Stack(children: <Widget>[
                                      index == 0
                                          ? Container(
                                              height: 300,
                                              width: 220,
                                              child: IconButton(
                                                onPressed: () {
                                                  Utils.changeScreen(
                                                      context, CreateTripApp());
                                                },
                                                icon: Image.asset(
                                                  'assets/images/flight.png',
                                                  height: 120,
                                                  fit: BoxFit.cover,
                                                  width: 100,
                                                ),
                                              ),
                                              decoration: BoxDecoration(
                                                image: DecorationImage(
                                                  image: AssetImage(
                                                      'assets/images/home.png'),
                                                  fit: BoxFit.cover,
                                                ),
                                                borderRadius: BorderRadius.all(
                                                  Radius.circular(20.0),
                                                ),
                                              ))
                                          : Container(
                                              height: 300,
                                              width: 220,
                                              decoration: BoxDecoration(
                                                  color: index % 2 == 0
                                                      ? Colors.red
                                                      : Colors.green,
                                                  borderRadius:
                                                      BorderRadius.all(
                                                          Radius.circular(
                                                              20.0))),
                                            ),
                                      Positioned(
                                          bottom: 30,
                                          right: 10,
                                          left: 10,
                                          child: index == 0
                                              ? Align(
                                                  alignment:
                                                      Alignment.bottomCenter,
                                                  child: Text(
                                                    Constants.createYourTrip,
                                                    textAlign: TextAlign.center,
                                                    style: TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 16.0,
                                                      fontFamily:
                                                          Fonts.standardBold,
                                                    ),
                                                  ))
                                              : Align(
                                                  alignment:
                                                      Alignment.bottomCenter,
                                                  child: Text(
                                                    'Hello There',
                                                    textAlign: TextAlign.center,
                                                    style: TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 16.0,
                                                      fontFamily:
                                                          Fonts.standardBold,
                                                    ),
                                                  )))
                                    ]),
                                  ),
                                );
                              })

And its working fine as excepted

but when navigate to another page I'm loosing Carousel effect please check below screenshot for the same

If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

Answer 1

A bit late, but I solved this by setting the value when the controller.position.haveDimensions is false and it's not the starting index (in my case, zero).

if (_controller.position.haveDimensions) {
  value = _controller.page - index;
  value = (1 - (value.abs() * .5)).clamp(0.0, 1.0);
}
else if (index != 0)
  value = 0.5;