Flutter fade animation between page views

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!

user_2179571 · Answer

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 {
  TransformerPageController controller = TransformerPageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            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
              ),
            )
          ],
        ),
      ),
    );
  }
}

user_1150190 · Answer

You can use AnimatedSwitcher as the body of your main widget:

AnimatedSwitcher(
          transitionBuilder: (Widget child, Animation animation) {
            return FadeTransition(
              child: child,
              opacity: animation,
            );
          },
          duration: const Duration(milliseconds: 600),
          child: _widgetOptions.elementAt(_selectedIndex))

Flutter fade animation between page views

2 Answers