首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何用onGenerateRoute在URL中显示Flutter Web路由名称?

在Flutter Web中,可以使用onGenerateRoute属性来在URL中显示路由名称。onGenerateRoute是一个回调函数,它接收一个RouteSettings对象作为参数,并返回一个Route对象。

首先,需要在MaterialApp中设置onGenerateRoute属性,并指定一个回调函数。这个回调函数会在路由被访问时被调用。

代码语言:txt
复制
MaterialApp(
  onGenerateRoute: (settings) {
    // 在这里根据settings.name返回对应的路由
    // 例如,如果settings.name是'/home',返回一个HomeRoute
    // 如果settings.name是'/profile',返回一个ProfileRoute
  },
  // 其他配置...
)

接下来,在回调函数中根据settings.name返回对应的路由。可以使用switch语句来匹配不同的路由名称,并返回相应的Route对象。

代码语言:txt
复制
MaterialApp(
  onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/home':
        return MaterialPageRoute(builder: (_) => HomeRoute());
      case '/profile':
        return MaterialPageRoute(builder: (_) => ProfileRoute());
      // 其他路由...
      default:
        return MaterialPageRoute(builder: (_) => NotFoundRoute());
    }
  },
  // 其他配置...
)

在这个例子中,如果URL中的路由名称是'/home',就会返回一个HomeRoute。如果URL中的路由名称是'/profile',就会返回一个ProfileRoute。如果URL中的路由名称不匹配任何已定义的路由,就会返回一个NotFoundRoute。

这样,当用户访问特定的URL时,就会显示对应的路由页面,并且URL中会显示路由名称。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter路由管理和页面参数的传递(获取&返回)

Android,页面对应的是Activity,iOS是ViewController。而在Flutter,页面只是一个widget!...Flutter,我们那么我们可以使用Navigator页面之间跳转。...路由( Route )移动开发通常指页面( Page ),这跟 web 开发单页应用的 Route 概念意义是相同的,Route Android 通常指一个 Activity , iOS 中指一个...我们通常要实现此回调,返回新路由的实例。 settings 包含路由的配置信息,路由名称路由参数、是否初始路由(首页)。...我们通过路由名称入栈新路由时,应用会根据路由名称路由表中找到对应的WidgetBuilder回调函数,然后调用该回调函数生成路由widget并返回。

4.4K40

第132期:flutter的导航和路由

使用命名路由Flutter应用也不支持浏览器的前进按钮。基于这些原因,官方其实是不建议大多数应用中使用命名路由。 当然,实际开发过程,我们需要根据实际情况进行调整。...深度链接 Deep linking Flutter支持iOS、Android和web浏览器上的深度链接。打开URL会在应用程序显示该屏幕。...通过以下步骤,我们可以使用命名路由(使用routes参数或onGenerateRoute)或使用Router小部件启动和显示路由。 如果我们web浏览器运行应用程序,则无需额外设置。...web上配置URL策略 flutter web 应用支持两种URL策略: hash模式。:flutterexample.dev/#/path/to/screen. path模式。...配置起来也很简单,从flutter_web_plugins插件库导入usePathUrlStrategy方法,入口函数调用即可。

2K30

还记得第一个看到的Flutter组件吗?

title参数是应用程序的描述,Android上,在任务管理器的应用程序快照上面显示IOS上忽略此属性,IOS上任务管理器应用程序快照上面显示的是Info.plist文件的CFBundleDisplayName...如果initialRoute设置为icon,routes存在,所以加载routes中指定的路由,即IconDemo页面。...如果initialRoute设置为icons1,此时routes并不存在名称为icons1的路由,调用onGenerateRoute,如果onGenerateRoute返回路由页面,则加载此页面,如果返回的是...pubspec.yaml文件添加包依赖: dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter...,只显示当前语言,设置->语言和地区的设置选项效果如下: [1240] 早期是没有红色区域的。

94900

还记得第一个看到的Flutter组件吗?

title参数是应用程序的描述,Android上,在任务管理器的应用程序快照上面显示IOS上忽略此属性,IOS上任务管理器应用程序快照上面显示的是Info.plist文件的CFBundleDisplayName...如果initialRoute设置为icon,routes存在,所以加载routes中指定的路由,即IconDemo页面。...如果initialRoute设置为icons1,此时routes并不存在名称为icons1的路由,调用onGenerateRoute,如果onGenerateRoute返回路由页面,则加载此页面,如果返回的是...pubspec.yaml文件添加包依赖: dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter...,只显示当前语言,设置->语言和地区的设置选项效果如下: ?

53430

学一学Flutter新的导航和路由系统

Router提供了从底层平台处理方和显示相应页面的方法。本文中,我们使用Router去解析浏览器 URL 并且显示相应的页面。...匿名路由 flutter通过Navigator可以很轻松的实现路由管理. MaterialApp和CupertinoApp使用Navigator非常容易。...Navigator 2.0 Navigator 2.0 API 框架添加了新类,以使APP的页面成为APP state的一个函数,并提供解析来自底层平台的路由 Web URL)的能力。...我们无法处理平台的后退按钮,浏览器的 URL 我们导航时也不会改变。 Router 到目前为止,该应用程序可以显示不同的页面,但它无法处理来自底层平台的路由,例如,、用户更新浏览器URL。...为了 URL 显示正确的路径,我们需要根据App的当前状态返回一个BookRoutePath: BookRoutePath get currentConfiguration { if (show404

4.5K40

Flutter』命名路由

1.前言 在上一篇文章,我们介绍了如何使用 Flutter 的导航器进行路由跳转,但是实际开发,我们往往会使用命名路由的方式进行跳转,本文将介绍如何使用命名路由进行跳转。...2.命名路由 2.1.命名路由简介 Flutter ,命名路由(Named Routes)是一种使用预定义名称来管理和访问路由的机制。...这种方法使代码更易于理解和维护,特别是具有多个页面的复杂应用程序。 2.2.常用属性 routes: MaterialApp 或 CupertinoApp 定义的路由表。...onGenerateRoute: 当通过 Navigator.pushNamed 访问的路由名称路由不存在时,这个回调函数被调用。...initialRoute: 应用程序启动时使用的首个路由名称。 onUnknownRoute: 当 onGenerateRoute 也无法生成路由时调用的回调。

21210

12.Flutter学习之路由即Android上的页面跳转

Flutter路由 Flutter路由通俗来讲就是页面跳转,Flutter通过Navigator组件管理路由导航。...并且提供了管理堆栈的方法,:Navigator.push和Navigator.pop Flutter提供了两种配置路由跳转的方式:1、基本路由 2、命名路由 Flutter的基本路由的使用 例如我们需要在...的命名路由的使用 使用命名路由导航时,我们需要先声明路由。...即我们要在MaterialApp的routes进行路由配置 值得一提的是,routes的值是Map类型的 main()=>runApp(MyApp())...命名路由中传参的时候,我们的页面构造参数需要发生改变。 MaterialApp中有一个onGenerateRoute属性,这是我们将我们定义的onGenerateRoute传递进去即可。

1.2K10

flutter 起步

图片注意点:官网下载flutter包完成将安装包zip解压到你想安装Flutter SDK的路径(:C:\src\flutter;注意,不要将flutter安装到需要一些高权限的路径C:\Program...pubspec.yaml添加第三方库名称及版本号。...当通过Navigation.of(context).pushNamed跳转路由时,routes查找不到时,会调用该方法6. onUnknownRoute效果跟onGenerateRoute一样调用顺序为...onGenerateRoute ==> onUnknownRoute7. navigatorObservers路由观察器,当调用Navigator的相关方法时,会回调相关的操作8. builder当构建一个... Material 设计定义的单个界面上的各种布局元素, Scaffold 中都支持。Scaffold 有下面几个主要属性:appBar - 显示界面顶部的一个 AppBar。

4.4K20

Flutter | 路由管理

对于移动开发者来说,路由指的就是页面, Android 中就是 activity, ios Wie ViewController 说简单点就是映射页面跳转关系的,当然它也包含跳转相关的一切功能 而路由管理则就是管理这些页面直接跳转...,返回值是一个 widget; 通常要实现此回调,返回新路由的实例 setting 包含路由的配置信息,例:路由名称,是否初始路由等 maintainState 默认情况下,当入栈一个新的路由时,原来的路由仍然会保存在内存...appbar,中间显示一个文本,和一个 RaisedButton,并且点击进行 pop 并传入要返回的值 @override Widget build(BuildContext context...有一个 onGenerateRoute 属性,他在打开路由时可能会被调用,之所以说可能,是应为当调用 Navigator.pushNamed() 打开路由时,如果指定的路由路由已经注册,则会调用路由的...builder 函数来生成路由组件;如果路由没有注册,才会调用 onGenerateRoute 来生成路由

93850

Flutter之WidgetsApp使用详解&与MaterialApp的纠缠

与MaterialApp相比 18个相同字段: 字段 类型 navigatorKey(导航键) GlobalKey onGenerateRoute(生成路由) RouteFactory...1. textStyle 为应用的文本使用的默认样式 使用 //该段代码源自flutter/material/app.dart //因为MaterialApp都是使用Theme里面的主题色,并且一般部件使用的是...4. home 该字段MaterialApp调用的是WidgetsApp的onGenerateRoute 当参数setting.name为Navigator.defaultRouteName(即..._onGenerateRoute : null, ) 5. routes 这个字段上面源码已经解释的很清楚 就是 _onGenerateRoute方法里面查找合适的路由 查找不到才自身字段...onGenerateRoute里面查找 6. theme 该主题主要传入到AnimatedTheme这个部件,最终传入Theme 用于作为MaterialAPP里面的Widget的主题 一般使用

2K30

Flutter 专题】110 页面间小跳转 (四)

RoutePopDisposition.doNotPop: return true; } return null; } 简单分析源码可得,maybePop 会有限判断当前路由列表是否为最后一个...2. routes routes 为静态路由映射表,是 Map 类型,当使用类似于 pushNamed 静态路由方式进行页面跳转时,其对应路由首先需要在此绑定;一般默认 / 对应 root 页面,当然我们可以自定义为其他名称...插件,其方式基本类似; 注意: 一般采用 home 方式展示 Widget 时,路由不设置 / 对应 root 路由; 3. initialRoute initialRoute 用于设置初始启动页面...4. onGenerateRoute onGenerateRoute 为 RouteFactory 类型构造函数,当使用静态路由进行页面跳转时,进入未在 routes 绑定的页面时,都会在 onGenerateRoute...中进行回调;一般封装时,不设置 routes 属性,均在 onGenerateRoute 中进行业务判断,常用作类似于拦截器的路由守卫等;同时对于公共的自定义路由专场动画也可以在此处理; Function

43631

Flutter | 路由管理

对于移动开发者来说,路由指的就是页面, Android 中就是 activity, ios Wie ViewController 说简单点就是映射页面跳转关系的,当然它也包含跳转相关的一切功能...,原来的路由仍然会保存在内存,如果想在路由没用的时候释放其所占用的资源,可以设置为 false fullscreenDialog 表示新的路由是否是一个全屏的模态对话框, ios 若此参数为...appbar,中间显示一个文本,和一个 RaisedButton,并且点击进行 pop 并传入要返回的值 class RouterTestRoute extends StatelessWidget...有一个 onGenerateRoute 属性,他在打开路由时可能会被调用,之所以说可能,是应为当调用 Navigator.pushNamed() 打开路由时,如果指定的路由路由已经注册,则会调用路由的...builder 函数来生成路由组件;如果路由没有注册,才会调用 onGenerateRoute 来生成路由

84320

【技术创作101训练营】Flutter Routes 路由应用与封装小结

PPT Flutter路由应用与封装小结.pdf 因 PPT 超过最大允许上传大小,因此上传为 PDF 格式,同时为 PPT 制作了一些 GIF 图,在演讲稿展示;各位老师辛苦了!...,简单介绍一下【静态路由封装】和【动态路由封装】两者相辅相成; 静态路由封装       (Page 23)静态路由主要是是对路由绑定的路由进行操作;应用 通常会采用 Android 风格的 MaterialApp...其他的页面再根据业务模块进行文件层级区分;使用过 ARouter 的朋友一定会非常了解; 注意:一般采用 home Widget 时,路由不设置 / 名称的 root 路由; 3. initialRoute...onGenerateRoute 为重要的构造函数,使用未在 routes 中注册的命名路由时均会在此回调,通过 onGenerateRoute 构造函数进行具体的业务操作或路由守卫等;...,然后通过 ModalRoute.settings 进行逻辑判断, onGenerateRoute 回调方法中进行路由管理,对于公共的转场动画也可以在此处理; 动态路由封装       (Page 25

1.3K102

Flutter 路由参数传递及接收

详情页Flutter 提供了一个ModalRoute的类从当前上下文获取路由配置参数,代码如下所示: class DynamicDetail extends StatelessWidget {...onGenerateRoute的 settings 参数,因此假设我们需要增加额外的路由参数(例如全局参数),则可以 onGenerateRoute 方法重新组装路由参数。...路由参数拦截 路由参数可以通过 onGenerateRoute拦截进行额外处理,示例代码如下。需要注意,这里仅仅是示例,由于 settings。...目前这种路由管理也会存在一定的不便之处,比如无法像网页的 url 一样路径名传递可变参数,以及无法控制页面跳转的转场动画。... pub 上fluro 路由管理非常流行,下一篇介绍如何使用 fluro 实现页面路由

1.2K00

Flutter基础widgets教程-WidgetsApp篇

this.routes = const {}, this.navigatorKey, this.initialRoute, this.onGenerateRoute...this.debugShowCheckedModeBanner = true, this.debugShowWidgetInspector }) 3 常用属性 3.1 title:安卓手机任务管理页面所看到应用的名字 title:Text("Flutter...Demo"), 3.2 home:app运行时打开的首页面 home: MyApp(), 3.3 routes:定义路由 内容为map健值对;key为路由名称,value为路由对应的页面。...debugShowWidgetInspector==true时才有效,点击该按钮之后再点击你要检查的视图) 3.7 debugShowMaterialGrid 该字段开启后,会在WidgetsApp外层包裹GridPaper,这个部件主要显示网格...3.8 initialRoute 指定默认显示路由名字,默认值为 Window.defaultRouteName 3.9 onGenerateRoute 路由回调函数 青年码农-获取更多.jpg

5401715

Flutter路由管理和页面参数的传递(源码分析)

前言 上一篇 Flutter路由管理和页面参数的传递(获取&返回) 文章我们讲述了这么用代码实现 Flutter 页面参数的传递,这一篇我们用源码分析一下 Navigator 为什么可以进行页面参数传递..._WidgetsAppState 的 Widget build(BuildContext context) 方法我们找到了管理路由的 Navigator 的构造时机。...(settings) 生成路由, 这里的 onGenerateRoute Navigator 构造的时候传入的 onGenerateRoute 。...onGenerateRoute Navigator 构造的时候如果我们细心就会发现 onGenerateRoute 现在改为了 _onGenerateRoute 。...这个解释了 Flutter路由管理和页面参数的传递(获取&返回) 这篇文章末尾说的 onGenerateRoute 方式进行的参数传递,必须不能进行 routers 的注册。

1.2K10
领券