web-dev-qa-db-ja.com

デフォルトのナビゲーションルートアニメーションを削除する方法

ページルーティングのためのFlutterドキュメントで与えられたコードの下にあります

// Within the `FirstRoute` widget
onPressed: () {
  Navigator.Push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}
 _

しかし、それはルートを押して移動しながらアニメーションをいくつか提供します。

Androidの場合、ページの入り口遷移はページを上にスライドさせてそれをフェードインします。出口遷移は同じですが、逆です。

移行はプラットフォームに適応し、iOSではページが右からスライドして逆に終了します。別のページがそれをカバーするときにPARALLAXのページも左に移動します。 （これらの方向は右から左への読み取り方向の環境では反転します。）

アニメーションなしで次のページにルーティングする方法はありますか？

編集:コード全体を確認してください。

class MyApp extends StatelessWidget {
  final routes = <String, WidgetBuilder>{
    SecondRoute.tag: (context) => SecondRoute(),
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Routes",
      home: new FirstRoute(),
      routes: routes,
      onGenerateRoute: (routeSettings) {
        if (routeSettings.name == SecondRoute.tag)
          return PageRouteBuilder(pageBuilder: (_, a1, a2) => SecondRoute());

        return null;
      },
    );
  }
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.of(context).pushNamed(SecondRoute.tag);

          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  static String tag = 'second-route';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}
 _
flutterflutter-animationflutter-navigation
9
jitsm555

Navigator.Push(...)を使用

Navigator.Push(
  context,
  PageRouteBuilder(pageBuilder: (_, __, ___) => SecondRoute()),
)
 _

Navigator.pushNamed(...)を使用

まず、これをMaterialAppに追加してください。

MaterialApp(
  onGenerateRoute: (settings) {
    if (settings.name == "/abc") 
      return PageRouteBuilder(pageBuilder: (_, __, ___) => SecondRoute());

    return null;
  },
)
 _

そしてそれをASに使用してください

Navigator.pushNamed(context, "/abc");
 _
3
CopsOnRoad

これでMyAppを置き換えます。

class MyApp extends StatelessWidget {
  final routes = <String, WidgetBuilder>{SecondRoute.tag: (context) => SecondRoute()};

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Routes",
      home: new FirstRoute(),
      onGenerateRoute: (routeSettings) {
        if (routeSettings.name == SecondRoute.tag)
          return PageRouteBuilder(
            pageBuilder: (_, a1, a2) => FadeTransition(opacity: a1 ,child: SecondRoute()),
            transitionDuration: Duration(seconds: 5),
          );

        return null;
      },
    );
  }
}
 _
2
CopsOnRoad

Flutterがサポートを増やすためにナビゲータ2.0に移行されるように、ナビゲータに遷移デレゲートを追加する上で、 移行ガイド をチェックアウトすることをお勧めします。意図した結果を実現するには、このクラスのインスタンスをナビゲータに追加します。

import 'package:flutter/widgets.Dart';

class NoAnimationTransitionDelegate extends TransitionDelegate<void> {
  @override
  Iterable<RouteTransitionRecord> resolve({
    List<RouteTransitionRecord> newPageRouteHistory,
    Map<RouteTransitionRecord, RouteTransitionRecord> locationToExitingPageRoute,
    Map<RouteTransitionRecord, List<RouteTransitionRecord>> pageRouteToPagelessRoutes,
  }) {
    final List<RouteTransitionRecord> results = <RouteTransitionRecord>[];

    for (final RouteTransitionRecord pageRoute in newPageRouteHistory) {
      // Renames isEntering to isWaitingForEnteringDecision.
      if (pageRoute.isWaitingForEnteringDecision) {
        pageRoute.markForAdd();
      }
      results.add(pageRoute);

    }
    for (final RouteTransitionRecord exitingPageRoute in locationToExitingPageRoute.values) {
      // Checks the isWaitingForExitingDecision before calling the markFor methods.
      if (exitingPageRoute.isWaitingForExitingDecision) {
        exitingPageRoute.markForRemove();
        final List<RouteTransitionRecord> pagelessRoutes = pageRouteToPagelessRoutes[exitingPageRoute];
        if (pagelessRoutes != null) {
          for (final RouteTransitionRecord pagelessRoute in pagelessRoutes) {
            pagelessRoute.markForRemove();
          }
        }
      }
      results.add(exitingPageRoute);

    }
    return results;
   }
 }
 _
0
Aidan Marshall