12

How do I change the duration/speed on transitions set in app's theme?

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,
    );
  }
}
Your Friend Ken
  • 8,644
  • 3
  • 32
  • 41
  • 1
    It looks like this is hardcoded to 300 milliseconds in the flutter source code : https://github.com/flutter/flutter/blob/dev/packages/flutter/lib/src/material/page.dart#L61 – Your Friend Ken Oct 14 '19 at 20:24

4 Answers4

9

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);
}
Patrick L
  • 151
  • 1
  • 9
7

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()));
CopsOnRoad
  • 237,138
  • 77
  • 654
  • 440
  • very similar solution (extending MaterialPageRoute class) but cleaner, less code. It worked well for me - thanks! – KYL3R Oct 14 '21 at 19:42
0

Better try update the default transition speed in flutter. in MaterialPageRoute (page.dart) file.

Duration get transitionDuration => const Duration(milliseconds: 300);

Update this line, Normally it will be 300 Milliseconds set in flutter.

sabith ckt
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 06 '22 at 19:51
0

when adding routes in onGenerate route in material app it works fine on mobile but on flutter web its not allowing to deep link url navigation (like google.com/products ) so its better to change the speed in MaterialPageRoute(page.dart) file for flutter web

Raj
  • 11
  • 2