Скорость / длительность перехода страницы смены флаттера в теме

Как изменить продолжительность / скорость переходов, установленных в теме приложения?

Я могу изменить анимацию перехода, используя тему для MaterialApp. В приведенном ниже примере переходы по умолчанию заменяются наFadeTransition. При использовании перехода затухания он кажется медленным, и я не могу понять, как изменить продолжительность переходов, установленных в теме.

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,
    );
  }
}

4 ответа

Я мог бы добиться этого с помощью именованных маршрутов, которые вам нужно указать в вашем собственном экземпляре Navigator, предоставленном конструктору MaterialApp. Необходимо удалить свойство initialRoute для MaterialApp.

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);
}

Создайте этот класс:

      class MyRoute extends MaterialPageRoute {
  MyRoute({WidgetBuilder builder}) : super(builder: builder);

  @override
  Duration get transitionDuration => Duration(seconds: 3);
}

Теперь вместо обычного

      Navigator.push(context, MaterialPageRoute(builder: (_) => Page2()));

использовать

      Navigator.push(context, MyRoute(builder: (_) => Page2()));

при добавлении маршрутов в маршрут onGenerate в материальном приложении он отлично работает на мобильных устройствах, но в сети флаттера он не позволяет навигацию по URL-адресам с глубокими ссылками (например, google.com/products), поэтому лучше изменить скорость в файле MaterialPageRoute(page.dart) для порхающая паутина

Лучше попробуйте обновить скорость перехода по умолчанию во флаттере. в файле MaterialPageRoute (page.dart).

Длительность get transitionDuration => const Duration (миллисекунды: 300);

Обновите эту строку. Обычно это будет 300 миллисекунд, установленных в флаттере.

Другие вопросы по тегам