Flutter fade animation between page views - flutter

Question

I'm trying to find how to fade between PageView pages.
This is my pageView:
PageView(
controller: controller,
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/image4.jpg"),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/image2.jpg"),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/image3.jpg"),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
],
),
Is it possible to implement a fade transition? I searched stack overflow but the only thing I could find was this package:
https://pub.dev/packages/transformer_page_view#-readme-tab-
The problem is that it hasn't a controller so my smoothPageIndactor wouldn't work. (https://pub.dev/packages/smooth_page_indicator)
Thanks!

Answer 1

You can copy paste run full code below
You can use TransformerPageView.children and TransformerPageController
TransformerPageController controller = TransformerPageController();
...
Expanded(
flex: 5,
child: TransformerPageView.children(
pageController: controller,
transformer: ScaleAndFadeTransformer(),
working demo
full code
import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:transformer_page_view/transformer_page_view.dart';
class ScaleAndFadeTransformer extends PageTransformer {
final double _scale;
final double _fade;
ScaleAndFadeTransformer({double fade: 0.3, double scale: 0.8})
: _fade = fade,
_scale = scale;
#override
Widget transform(Widget item, TransformInfo info) {
double position = info.position;
double scaleFactor = (1 - position.abs()) * (1 - _scale);
double fadeFactor = (1 - position.abs()) * (1 - _fade);
double opacity = _fade + fadeFactor;
double scale = _scale + scaleFactor;
return new Opacity(
opacity: opacity,
child: new Transform.scale(
scale: scale,
child: item,
),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TransformerPageController controller = TransformerPageController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 5,
child: TransformerPageView.children(
pageController: controller,
transformer: ScaleAndFadeTransformer(),
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image:
NetworkImage('https://picsum.photos/250?image=9'),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://picsum.photos/250?image=10'),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://picsum.photos/250?image=11'),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
],
),
),
Expanded(
flex: 1,
child: SmoothPageIndicator(
controller: controller, // PageController
count: 3,
effect: WormEffect(), // your preferred effect
),
)
],
),
),
);
}
}

Answer 2

You can use AnimatedSwitcher as the body of your main widget:
AnimatedSwitcher(
transitionBuilder: (Widget child, Animation<double> animation) {
return FadeTransition(
child: child,
opacity: animation,
);
},
duration: const Duration(milliseconds: 600),
child: _widgetOptions.elementAt(_selectedIndex))