introduce fluro native transition for android - more closely matches android animation
This commit is contained in:
parent
9dcec93b4a
commit
35887faf50
|
@ -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]}!";
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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");
|
||||||
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue