introduce fluro native transition for android - more closely matches android animation

This commit is contained in:
Luke 2018-04-05 16:55:19 -07:00
parent 9dcec93b4a
commit 35887faf50
4 changed files with 41 additions and 5 deletions

View File

@ -145,7 +145,7 @@ class HomeComponentState extends State<HomeComponent> {
String message = ""; String message = "";
String hexCode = "#FFFFFF"; String hexCode = "#FFFFFF";
String result; String result;
TransitionType transitionType = TransitionType.native; TransitionType transitionType = TransitionType.fluroNative;
if (key != "custom" && key != "function-call") { if (key != "custom" && key != "function-call") {
if (key == "native") { if (key == "native") {
hexCode = "#F76F00"; hexCode = "#F76F00";
@ -159,7 +159,7 @@ class HomeComponentState extends State<HomeComponent> {
message = "This screen should have appeared with a fade in transition"; message = "This screen should have appeared with a fade in transition";
transitionType = TransitionType.fadeIn; transitionType = TransitionType.fadeIn;
} else if (key == "pop-result") { } else if (key == "pop-result") {
transitionType = TransitionType.native; transitionType = TransitionType.fluroNative;
hexCode = "#7d41f4"; hexCode = "#7d41f4";
message = "When you close this screen you should see the current day of the week"; message = "When you close this screen you should see the current day of the week";
result = "Today is ${_daysOfWeek[new DateTime.now().weekday]}!"; result = "Today is ${_daysOfWeek[new DateTime.now().weekday]}!";

View File

@ -8,6 +8,7 @@
library fluro; library fluro;
import 'dart:async'; import 'dart:async';
import 'dart:io';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';

View File

@ -51,3 +51,10 @@ class RouteMatch {
final RouteMatchType matchType; final RouteMatchType matchType;
final String errorMessage; final String errorMessage;
} }
TargetPlatform currentPlatform() {
if (Platform.isIOS) return TargetPlatform.iOS;
if (Platform.isAndroid) return TargetPlatform.android;
if (Platform.isFuchsia) return TargetPlatform.fuchsia;
throw Exception("Unsupported platform");
}

View File

@ -10,6 +10,7 @@ part of fluro;
enum TransitionType { enum TransitionType {
native, native,
nativeModal, nativeModal,
fluroNative,
inFromLeft, inFromLeft,
inFromRight, inFromRight,
inFromBottom, inFromBottom,
@ -41,7 +42,7 @@ class Router {
/// ///
Future navigateTo(BuildContext context, String path, Future navigateTo(BuildContext context, String path,
{bool replace = false, {bool replace = false,
TransitionType transition = TransitionType.native, TransitionType transition = TransitionType.fluroNative,
Duration transitionDuration = const Duration(milliseconds: 250), Duration transitionDuration = const Duration(milliseconds: 250),
RouteTransitionsBuilder transitionBuilder}) { RouteTransitionsBuilder transitionBuilder}) {
RouteMatch routeMatch = matchRoute(context, path, RouteMatch routeMatch = matchRoute(context, path,
@ -118,10 +119,15 @@ class Router {
return new RouteMatch(matchType: RouteMatchType.nonVisual); return new RouteMatch(matchType: RouteMatchType.nonVisual);
} }
final platform = currentPlatform();
RouteCreator creator = RouteCreator creator =
(RouteSettings routeSettings, Map<String, List<String>> parameters) { (RouteSettings routeSettings, Map<String, List<String>> parameters) {
// We use the standard material route for .native, .nativeModal and
// .fluroNative if you're on iOS
bool isNativeTransition = (transitionType == TransitionType.native || bool isNativeTransition = (transitionType == TransitionType.native ||
transitionType == TransitionType.nativeModal); transitionType == TransitionType.nativeModal ||
(transitionType == TransitionType.fluroNative &&
platform != TargetPlatform.android));
if (isNativeTransition) { if (isNativeTransition) {
return new MaterialPageRoute<dynamic>( return new MaterialPageRoute<dynamic>(
settings: routeSettings, settings: routeSettings,
@ -133,6 +139,10 @@ class Router {
if (transitionType == TransitionType.custom) { if (transitionType == TransitionType.custom) {
routeTransitionsBuilder = transitionsBuilder; routeTransitionsBuilder = transitionsBuilder;
} else { } else {
if (transitionType == TransitionType.fluroNative &&
platform == TargetPlatform.android) {
transitionDuration = new Duration(milliseconds: 150);
}
routeTransitionsBuilder = _standardTransitionsBuilder(transitionType); routeTransitionsBuilder = _standardTransitionsBuilder(transitionType);
} }
return new PageRouteBuilder<dynamic>( return new PageRouteBuilder<dynamic>(
@ -156,7 +166,25 @@ class Router {
TransitionType transitionType) { TransitionType transitionType) {
return (BuildContext context, Animation<double> animation, return (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) { Animation<double> secondaryAnimation, Widget child) {
if (transitionType == TransitionType.fadeIn) { if (transitionType == TransitionType.fluroNative) {
return new SlideTransition(
position: new Tween<Offset>(
begin: const Offset(0.0, 0.12),
end: const Offset(0.0, 0.0),
).animate(new CurvedAnimation(
parent: animation,
curve: new Interval(0.125, 0.950, curve: Curves.fastOutSlowIn),
reverseCurve: Curves.easeOut,
)),
child: new FadeTransition(
opacity: new Tween<double>(
begin: 0.0,
end: 1.0,
).animate(animation),
child: child,
),
);
} else if (transitionType == TransitionType.fadeIn) {
return new FadeTransition(opacity: animation, child: child); return new FadeTransition(opacity: animation, child: child);
} else { } else {
const Offset topLeft = const Offset(0.0, 0.0); const Offset topLeft = const Offset(0.0, 0.0);