Transition Demo

main.dart

import 'package:animations/animations.dart';
import 'package:flutter/material.dart';

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: 'Transition Demo'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController _primaryController;
  AnimationController _secondaryController;
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _primaryController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    _secondaryController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    _primaryController.forward();
  }

  @override
  void dispose() {
    _primaryController?.dispose();
    _secondaryController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final Widget counter = CounterWidget();
    Widget transition;
    switch (_currentIndex) {
      case 1:
        transition = FadeThroughTransition(
          animation: _primaryController,
          secondaryAnimation: _secondaryController,
          child: counter,
        );
        break;
      case 2:
        transition = SharedAxisTransition(
          animation: _primaryController,
          secondaryAnimation: _secondaryController,
          transitionType: SharedAxisTransitionType.horizontal,
          child: counter,
        );
        break;
      default:
        transition = FadeScaleTransition(
          animation: _primaryController,
          child: counter,
        );
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.chevron_left),
            onPressed: () {
              _primaryController.reverse();
            },
          ),
          IconButton(
            icon: const Icon(Icons.chevron_right),
            onPressed: () {
              _primaryController.forward();
            },
          ),
          IconButton(
            icon: const Icon(Icons.arrow_back),
            onPressed: () {
              _secondaryController.reverse();
            },
          ),
          IconButton(
            icon: const Icon(Icons.arrow_forward),
            onPressed: () {
              _secondaryController.forward();
            },
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                child: AnimatedBuilder(
                  animation: _primaryController,
                  builder: (BuildContext context, Widget child) {
                    return Text(
                        'Primary: ${_primaryController.value.toStringAsFixed(2)}');
                  },
                ),
              ),
              Expanded(
                child: AnimatedBuilder(
                  animation: _secondaryController,
                  builder: (BuildContext context, Widget child) {
                    return Text(
                        'Secondary: ${_secondaryController.value.toStringAsFixed(2)}');
                  },
                ),
              ),
            ],
          ),
          Expanded(
            child: transition,
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() => _currentIndex = index);
        },
        items: [
          BottomNavigationBarItem(
            icon: const Icon(Icons.play_arrow),
            title: Text("FadeScale"),
          ),
          BottomNavigationBarItem(
            icon: const Icon(Icons.play_arrow),
            title: Text("FadeThrough"),
          ),
          BottomNavigationBarItem(
            icon: const Icon(Icons.play_arrow),
            title: Text("SharedAxis-X"),
          ),
        ],
      ),
    );
  }
}

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("Counter $_counter"),
        SizedBox(height: 16.0),
        FloatingActionButton(
          onPressed: () {
            setState(() => _counter++);
          },
          child: const Icon(Icons.add),
        ),
      ],
    );
  }
}