PageView Page Animation / Transition Example - by Simon Lightfoot - 12/05/2020

page_animation.dart

// MIT License
//
// Copyright (c) 2020 Simon Lightfoot
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
//
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() => runApp(PageAnimationExampleApp());

class PageAnimationExampleApp extends StatefulWidget {
  @override
  _PageAnimationExampleAppState createState() => _PageAnimationExampleAppState();
}

class _PageAnimationExampleAppState extends State<PageAnimationExampleApp> {
  PageController _controller;

  @override
  void initState() {
    super.initState();
    _controller = PageController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Material(
        child: PageView(
          controller: _controller,
          children: [
            for (int i = 0; i < Colors.primaries.length; i++)
              Builder(
                builder: (BuildContext context) {
                  final anim = PageAnimation(i, _controller);
                  return SlideTransition(
                    position: Tween(begin: Offset(1.0, 0.0), end: Offset.zero).animate(
                      CurvedAnimation(
                        parent: anim,
                        curve: Curves.fastOutSlowIn,
                      ),
                    ),
                    child: FadeTransition(
                      opacity: CurvedAnimation(parent: anim, curve: Interval(0.0, 0.5)),
                      child: Container(
                        color: Colors.primaries[i],
                        alignment: Alignment.center,
                        child: Text(
                          'Page ${i + 1}',
                          style: TextStyle(
                            fontSize: 32.0,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  );
                },
              )
          ],
        ),
      ),
    );
  }
}

class PageAnimation extends Animation<double>
    with
        AnimationLazyListenerMixin,
        AnimationLocalListenersMixin,
        AnimationLocalStatusListenersMixin {
  PageAnimation(this.index, this.controller) {
    _status = AnimationStatus.dismissed;
    _value = 0.0;
  }

  final int index;
  final PageController controller;

  AnimationStatus _status;
  double _value;

  @override
  void didStartListening() {
    controller.addListener(_onPageControllerUpdated);
    _onPageControllerUpdated();
  }

  void _onPageControllerUpdated() {
    final prevValue = _value;
    double page = (controller.hasClients && controller.position.haveDimensions)
        ? controller.page
        : controller.initialPage.toDouble();
    _value = (1.0 - (page - index).abs()).clamp(0.0, 1.0);

    final prevStatus = _status;
    if (_value == 1.0) {
      _status = AnimationStatus.dismissed;
    } else if (_value == 0.0) {
      _status = AnimationStatus.completed;
    } else if (prevValue < _value) {
      _status = AnimationStatus.forward;
    } else {
      _status = AnimationStatus.reverse;
    }

    if (prevValue != _value) {
      notifyListeners();
    }

    if (prevStatus != _status) {
      notifyStatusListeners(status);
    }
  }

  @override
  void didStopListening() {
    controller.removeListener(_onPageControllerUpdated);
  }

  @override
  AnimationStatus get status => _status;

  @override
  double get value => _value;

  @override
  String toString() {
    return '${describeIdentity(this)}($index, $controller, ${toStringDetails()}, $value)';
  }
}