Simple Crossfade

[jtkeyva]

Hello this is great! I just can't figure out how to do a simple crossfade. How do i make it so when i tap a button it doesn't move or "jump" to a page or animate to a page... but rather crossfades from the current slide to the next slide.

this fades out one page and then fades in another but it's not a proper crossfade. any help appreciated thanks

`
import 'package:another_transformer_page_view/another_transformer_page_view.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

List list = [Colors.yellow, Colors.green, Colors.blue];

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@OverRide
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, this.title}) : super(key: key);

final String? title;

@OverRide
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State with SingleTickerProviderStateMixin {
final IndexController _pageController = IndexController();
late AnimationController _animationController;
late Animation _fadeAnimation;

@OverRide
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 100),
);
_fadeAnimation = Tween(begin: 1.0, end: 0.0).animate(_animationController);
}

void _jumpToPage(int pageIndex) {
animationController.forward().then(() {
_pageController.move(pageIndex, animation: false);
_animationController.reverse();
});
}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
FadeTransition(
opacity: _fadeAnimation,
child: TransformerPageView(
scrollDirection: Axis.vertical,
loop: true,
controller: _pageController,
transformer: JTZoomInPageTransformer(),
itemBuilder: (BuildContext context, int index) {
return ColoredBox(
color: list[index % list.length],
child: Center(
child: Text(
'$index',
style: const TextStyle(fontSize: 80.0, color: Colors.white),
),
),
);
},
itemCount: 13,
),
),
Positioned(
bottom: 50,
left: 10,
child: ElevatedButton(
onPressed: () {
_jumpToPage(0); // Jump to page 0 with fade animation
},
child: const Text('Go to Page 1'),
),
),
Positioned(
bottom: 50,
right: 10,
child: ElevatedButton(
onPressed: () {
_jumpToPage(5); // Jump to page 5 with fade animation
},
child: const Text('Go to Page 6'),
),
),
],
),
);
}

@OverRide
void dispose() {
_animationController.dispose();
super.dispose();
}
}

class JTZoomInPageTransformer extends PageTransformer {
@OverRide
Widget transform(Widget child, TransformInfo info) {
final position = info.position!;
final width = info.width;
if (position > 0 && position <= 1) {
return Transform.translate(
offset: const Offset(0.0, 0.0),
child: Transform.scale(
scale: 1,
child: child,
),
);
}
return child;
}
}

`