Shared Axis Transition

[shihaohong]

Description

Implement the shared x-axis and shared y-axis transitions. This PR also deletes the existing SharedZAxisTransitionsBuilder and pulls it into SharedAxisPageTransitionsBuilder through an option called SharedAxisTransitionType.scaled.

MaterialApp(
theme:ThemeData(
pageTransitionsTheme:PageTransitionsTheme(
builders: {
TargetPlatform.android:SharedAxisPageTransitionsBuilder(
transitionType:SharedAxisTransitionType.horizontal, // or SharedAxisTransitionType.vertical
),
},
),
),
// ...
);

Shared X-Axis Transition

Shared Y-Axis Transition

Discussion

Similarity to Shared Z Axis Transition

I noticed that the curves used for this transition is identical to #57 minus the difference in scale/translation animations, but decided to create a separate builder and suite of tests in the event that the specs change, which might make it difficult to decouple their implementations. If using the same builder and adding a new enum value of something like SharedAxisTransition.scaled seems more convenient, we could implement it that way as well.

Sample App:

import'package:flutter/material.dart';
import'package:animations/animations.dart';
voidmain() {
runApp(MyApp());
}
classMyAppextendsStatelessWidget {
@overrideWidgetbuild(BuildContext context) {
returnMaterialApp(
title:'Flutter Demo',
theme:ThemeData(
primarySwatch:Colors.blue,
),
home:MyHomePage(title:'Flutter Demo Home Page'),
);
}
}
classMyHomePageextendsStatefulWidget {
MyHomePage({Key key, this.title}) :super(key: key);
finalString title;
@override_MyHomePageStatecreateState() =>_MyHomePageState();
}
class_MyHomePageStateextendsState<MyHomePage> {
int _selectedIndex =0;
finalList<Color> _colors = [Colors.white, Colors.red, Colors.yellow];
@overrideWidgetbuild(BuildContext context) {
returnScaffold(
appBar:AppBar(
title:constText('Page Transition Example'),
),
body:PageTransitionSwitcher(
transitionBuilder: (
Widget child,
Animation<double> primaryAnimation,
Animation<double> secondaryAnimation,
) {
returnSharedAxisTransition(
animation: primaryAnimation,
secondaryAnimation: secondaryAnimation,
child: child,
transitionType:SharedAxisTransitionType.vertical,
);
},
child:Container(
key:ValueKey<int>(_selectedIndex),
color: _colors[_selectedIndex],
child:Center(
child:FlutterLogo(size:300),
)
),
),
bottomNavigationBar:BottomNavigationBar(
items:const<BottomNavigationBarItem>[
BottomNavigationBarItem(
icon:Icon(Icons.home),
title:Text('White'),
),
BottomNavigationBarItem(
icon:Icon(Icons.business),
title:Text('Red'),
),
BottomNavigationBarItem(
icon:Icon(Icons.school),
title:Text('Yellow'),
),
],
currentIndex: _selectedIndex,
onTap: (int index) {
setState(() {
_selectedIndex = index;
});
},
),
);
}
}

[goderbauer]

LGTM with some minor comments

[goderbauer]

nit: this sentence seems to be incomplete. Maybe missing an "of"?

[goderbauer]

nit: add a blank line before this

[goderbauer]

nit: incomplete sentence?

[goderbauer]

nit: add a trailing comma and reformat.

[goderbauer]

enums are best used with switch/case

[goderbauer]

same

[goderbauer]

uber-nit (feel free to ignore): I think that dartfmt formats these multi-line expects nicer if you add a trailing comma.

(here and elsewhere)

[shihaohong]

@goderbauer I addressed the code review feedback.

We also spoke offline about having the SharedZAxisTransition builder simply be a part of the x and y SharedAxisTransition builders. I've deleted the SharedZAxis transition code and incorporated it into the SharedAxisTransition builder itself.

[goderbauer]

LGTM

[goderbauer]

Can you mention the alternative name (x, y, z axis) in these doc strings?

[goderbauer]

I believe MaterialButton is to be avoided and RaisedButton, FlatButton, or OutlineButton should be used.

[goderbauer]

This is only used in tests, right? In that case, it should be a dev_dependency and moved to the section below.