CODEWITHSUNDEEP
flutterdart
Scaraux
Scaraux

Reputation: 4152

Flutter Route animation animate both new and old route to slide

I am able to animate a new route so it appears by sliding from right to left, and goes on top of my current page.

However, I would like to animate both pages (the new and old one). The goal would be that they both slide from right to left, and not just the new one to go on top.

This is my code for only the right one to slide:

class SlideRightRoute extends PageRouteBuilder {
  final Widget page;
  SlideRightRoute({this.page})
      : super(
            pageBuilder: (
              BuildContext context,
              Animation<double> animation,
              Animation<double> secondaryAnimation,
            ) =>
                page,
            transitionsBuilder: (
              BuildContext context,
              Animation<double> animation,
              Animation<double> secondaryAnimation,
              Widget child,
            ) {
              var begin = Offset(1.0, 0.0);
              var end = Offset.zero;
              var curve = Curves.ease;
              var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

              return SlideTransition(
                position: animation.drive(tween),
                child: child,
              );
            });
}

Upvotes: 1

Views: 462

Answers (1)

Jackson Lee
Jackson Lee

Reputation: 1238

You are probably wanting to use a TabController with a TabBarView in a Stateful widget with SingleTickerProviderStateMixin.

import 'package:flutter/material.dart';

TabController tabController;

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> with SingleTickerProviderStateMixin {
  int activeTab = 0;
  @override
  void initState() {
    tabController = TabController(length: 3, vsync: this, initialIndex: 0)
      ..addListener(() {
        setState(() {
          activeTab = tabController.index;
        });
      });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebAppTest'),
      ),
      body: Expanded(
        child: TabBarView(
          controller: tabController,
          children: <Widget>[
            FirstScreen(), //Index 0
            SecondScreen(), //Index 1
            ThirdScreen(), //Index 2
          ],
        ),
      ),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        tabController.animateTo(2);
      },
      child: Text('To Screen 3!'),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        tabController.animateTo(0);
      },
      child: Text('To Screen 1!'),
    );
  }
}

class ThirdScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        tabController.animateTo(1);
      },
      child: Text('To Screen 2!'),
    );
  }
}

Upvotes: 1

Related Questions