AnimatedSwitcher example

pages_switcher.dart

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import 'package:flutter_redux/flutter_redux.dart';

import 'curves.dart' as mt_curves;

class PagesSwitcher extends StatelessWidget {
  final List<Widget> pages = [
    FirstPage(),
    SecondPage(),
    ThirdPage(),
    FourthPage(),
  ];

  @override
  Widget build(BuildContext ctx) {
    return StoreConnector<AppState, PagesVm>(
      converter: (Store<AppState> store) {
        return PagesVm(
          loading: store.state.loading,
          pageIndex: store.state.pageIndex,
        );
      },

      builder: (BuildContext ctx, PagesVm vm) {
        return AnimatedSwitcher(
          duration: Duration(milliseconds: 250),
          child: pages.elementAt(vm.pageIndex),
          switchInCurve: Interval(
            0.3,
            1,
            curve: mt_curves.easeOutQuart,
          ),

          switchOutCurve: Interval(
            0.7,
            1,
            curve: Curves.linear,
          ),

          transitionBuilder: (Widget child, Animation<double> animation) {
            Widget fadeChild;
            if (animation.status == AnimationStatus.dismissed) {
              // current page includes an additional scale transition
              fadeChild = ScaleTransition(
                scale: Tween<double>(begin: 0.95, end: 1).animate(animation),
                child: child,
              );
            } else {
              // previous page just fades out
              fadeChild = child;
            }

            return FadeTransition(
              opacity: animation,
              child: fadeChild,
            );
          }
        );
      }
    );
  }
}

class PagesVm {
  bool loading;
  int pageIndex;

  PagesVm({
    @required this.loading,
    @required this.pageIndex,
  });

  @override
  bool operator ==(other) {
    if (other is! PagesVm) {
      return false;
    }

    PagesVm vm = other;
    return
      loading == vm.loading
      && pageIndex == vm.pageIndex;
  }

  @override
  int get hashCode {
    return hashValues(
      loading,
      pageIndex,
    );
  }
}