web-dev-qa-db-ja.com

フラッターアプリでフラッタールートにカスタムトランジションを追加する方法

フラッタールートにカスタムトランジションを追加するにはどうすればよいですか。これが私の現在のルート構造です。

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'Yaip',
            theme: new ThemeData(
                primarySwatch: Colors.pink,
                brightness: Brightness.light
            ),
            home: new VerifyPhoneNumber(),
            routes: <String, WidgetBuilder>{
                '/verified': (BuildContext context) =>  new MobileNumberVerified(),
                '/setupprofile': (BuildContext context) =>  new SetUpProfile()
            },
        );
    }
}
flutterdartroutestransition
9
Michael Tawiah Sowah

MaterialPageRoute をサブクラス化し、 buildTransitions をオーバーライドできます。 このスタックオーバーフローの答え のコード例をご覧ください。

8
Collin Jackson

PageRouteBuilderを使用できます。

次の例は、2番目の画面に移動したときのFadeTransitionを示しています。

Navigator.Push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation1, animation2) {
      return SecondPage();
    },
    transitionsBuilder: (context, animation1, animation2, child) {
      return FadeTransition(
        opacity: animation1,
        child: child,
      );
    },
    transitionDuration: Duration(milliseconds: 2000),
  ),
);
6
CopsOnRoad

すべてのルートでiOSのようなアニメーションが必要な場合は、MaterialAppウィジェットの遷移テーマを変更してCupertinoPageTransitionsBuilderを使用できます

MaterialApp(
   theme: ThemeData(
   pageTransitionsTheme: PageTransitionsTheme(builders: {
   TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
   TargetPlatform.Android: CupertinoPageTransitionsBuilder(),
   }),
...
)
4
Michael Guldborg

デフォルトのマテリアルパッケージ以外のパッケージを使用したい場合に備えて、「Fluro」として知られるflutterの美しいライブラリ/パッケージが1つあります。このライブラリは、オーバーヘッドを抑えて使用できます。ここに公式fluroへのリンクがあります- https://pub.dartlang.org/packages/fluro これは提供されたサンプルディレクトリから完全に学ぶことができます。

4
Vaibhav Miniyar