I am able to change the transition animation using a theme for a MaterialApp
. The example below replaces the default transitions with a FadeTransition
. When using the fade transition it feels slow and I cannot figure out how to change the duration on transitions set in the theme.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
final themeData = ThemeData(
pageTransitionsTheme: PageTransitionsTheme(builders: {
TargetPlatform.iOS: FadeTransitionBuilder(),
TargetPlatform.android: FadeTransitionBuilder(),
}),
);
class FadeTransitionBuilder extends PageTransitionsBuilder {
@override
Widget buildTransitions<T>(_, __, animation, ___, child) => FadeTransition(opacity: animation, child: child);
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Mobile',
theme: themeData,
initialRoute: '/',
routes: routes,
);
}
}
I could achieve this using named routes which you need to list in your own instance of Navigator provided to the MaterialApp builder. The initialRoute property of MaterialApp must be removed.
class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
Route<dynamic> generateRoute(RouteSettings settings) {
switch (settings.name) {
case '/about':
return CustomPageRoute(
builder: (context) => About());
default:
return CustomPageRoute(
builder: (context) => Home());
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Mobile',
theme: themeData,
builder: (context, widget) {
return Navigator(
onGenerateRoute: generateRoute,
);
},
);
}
}
class CustomPageRoute extends MaterialPageRoute {
@override
Duration get transitionDuration => const Duration(milliseconds: 1000);
CustomPageRoute({builder}) : super(builder: builder);
}
Create this class:
class MyRoute extends MaterialPageRoute {
MyRoute({WidgetBuilder builder}) : super(builder: builder);
@override
Duration get transitionDuration => Duration(seconds: 3);
}
Now, instead of using regular
Navigator.push(context, MaterialPageRoute(builder: (_) => Page2()));
use
Navigator.push(context, MyRoute(builder: (_) => Page2()));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With