使用WidgetsApp的应用导航示例 [英] App navigation example using WidgetsApp

问题描述

我正在尝试声明我的应用导航。由于我没有使用 MaterialApp 包装器或样式，因此所有导入均来自 package：flutter / widgets.dart 。

I'm trying to declare my apps navigation. As I am not using MaterialApp wrapper or styling, all my imports come from package:flutter/widgets.dart.

根据文档，为了正确使用导航，我正在这样做：

As per docs, to use Navigation properly I am doing this:

import "package:flutter/widgets.dart";
import "package:myapp/routes/home.dart";

void main() {
  runApp(
    new WidgetsApp(/* stuck here */);
  )
}

我被困在这一步，我试图遵循导航器文档和ide中的代码注释，但我不知道如何使用 onGenerateRoute WidgetsApp 的$ c>属性，也无法在线找到该示例的完整示例，因此出现了问题。

And I am stuck at this step, I am trying to follow Navigator docs and code comments in ide, but I can't figure out how to use onGenerateRoute property of WidgetsApp, nor can find full example of this online, hence the question.

new MaterialApp（）如何在 new WidgetsApp（）中定义我的主路径和其余路线？

Similarly to new MaterialApp() how do I define my home path and rest of the routes within new WidgetsApp()?

作为对此的后续问题，我是否可以使用通配符路由，例如 / onboarding / ** 或 / dashboard / ** 在 new WidgetsApp（）内，以某种方式路由到布局中，然后用switch语句检查路由和显示页面？

As a follow up question to this, am I allowed to to use wildcard routes like /onboarding/** or /dashboard/** inside new WidgetsApp() somehow to route into layouts which then have switch statement checking for a route and display pages?

推荐答案

您可以在onGenerateRout上使用 e 属性为小部件应用程序生成路由。

You can use onGenerateRoute property to generate route for widgets app.

这里是一个非常小的实现：

Here is a very minimal implementation of the same:

import 'package:flutter/widgets.dart';

void main() => runApp(new MyWidgetsApp());

class MyWidgetsApp extends StatelessWidget {

  Route generate(RouteSettings settings){
    Route page;
    switch(settings.name){
      case "/":
        page =  new PageRouteBuilder(
            pageBuilder: (BuildContext context,Animation<double> animation,
                Animation<double> secondaryAnimation){
              return new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text("Home Page",textDirection: TextDirection.ltr,),
                  const Padding(padding: const EdgeInsets.all(10.0)),
                  new GestureDetector(
                    onTap: () => Navigator.of(context).pushNamed("/first"),
                    child: new Container(
                      padding: const EdgeInsets.all(10.0),
                      color:Colors.blue,
                      child: const Text("Go to First Page"),
                    ),
                  ),
                  const Padding(padding: const EdgeInsets.all(10.0)),
                  new GestureDetector(
                    onTap: () => Navigator.of(context).pushNamed("/abcd"),
                    child: new Container(
                      padding: const EdgeInsets.all(10.0),
                      color:Colors.blue,
                      child: const Text("Unkown Route"),
                    ),
                  )
                ],
              );
            },
            transitionsBuilder: (_, Animation<double> animation, Animation<double> second, Widget child) {
              return new FadeTransition(
                opacity: animation,
                child: new FadeTransition(
                  opacity: new Tween<double>(begin: 1.0, end: 0.0).animate(second),
                  child: child,
                ),
              );
            }
        );
        break;
      case "/first":
        page =  new PageRouteBuilder(
            pageBuilder: (BuildContext context,Animation<double> animation,
                Animation<double> secondaryAnimation){
              return new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Text("First Page",textDirection: TextDirection.ltr,),
                    const Padding(padding: const EdgeInsets.all(10.0)),
                    new GestureDetector(
                      onTap: () => Navigator.of(context).pop(),
                      child: new Container(
                        padding: const EdgeInsets.all(10.0),
                        color:Colors.blue,
                        child: const Text("Back"),
                      ),
                    )
                  ]
              );
            },
            transitionsBuilder: (_, Animation<double> animation, Animation<double> second, Widget child) {
              return new FadeTransition(
                opacity: animation,
                child: new FadeTransition(
                  opacity: new Tween<double>(begin: 1.0, end: 0.0).animate(second),
                  child: child,
                ),
              );
            }
        );
        break;
    }
    return page;
  }

  Route unKnownRoute(RouteSettings settings){
    return new PageRouteBuilder(
        pageBuilder: (BuildContext context,Animation<double> animation,
            Animation<double> secondaryAnimation){
          return new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text("First Page",textDirection: TextDirection.ltr,),
                const Padding(padding: const EdgeInsets.all(10.0)),
                new GestureDetector(
                  onTap: () => Navigator.of(context).pop(),
                  child: new Container(
                    padding: const EdgeInsets.all(10.0),
                    color:Colors.blue,
                    child: const Text("Back"),
                  ),
                )
              ]
          );
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    return new WidgetsApp(
        onGenerateRoute: generate,
        onUnknownRoute: unKnownRoute,
        textStyle: const TextStyle(),
        initialRoute: "/",
        color: Colors.red
    );
  }
}

希望有帮助！

这篇关于使用WidgetsApp的应用导航示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！