flutter-navigation by madteacher/mad-agents-skills
npx skills add https://github.com/madteacher/mad-agents-skills --skill flutter-navigation在跨移动端和 Web 平台的 Flutter 应用中实现导航和路由。选择合适的导航方法,配置深度链接,管理屏幕间的数据流,并处理浏览器历史记录集成。
示例:assets/navigator_basic.dart
示例:assets/go_router_basic.dart
Flutter 团队不推荐使用命名路由。它们存在以下限制:
使用 Navigator:
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailScreen(item: myItem)),
);
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
使用 go_router:
context.push('/details?id=123');
// 提取:final id = state.uri.queryParameters['id'];
示例:assets/passing_data.dart
final result = await Navigator.push(
context,
MaterialPageRoute<String>(builder: (context) => SelectionScreen()),
);
if (!context.mounted) return;
示例:assets/returning_data.dart
Android: 配置 AndroidManifest.xml 中的 intent 过滤器
iOS: 为通用链接配置 Info.plist
Web: 使用 go_router 自动配置,选择 URL 策略
详细设置请参考:references/deep-linking.md
哈希模式(默认): example.com/#/path - 无需服务器配置
路径模式: example.com/path - URL 更简洁,需要服务器配置
服务器设置请参考:references/web-navigation.md
context.go('/path') - 替换当前路由context.push('/path') - 添加到栈context.pop() - 返回Navigator.push() - 将路由添加到栈Navigator.pop() - 从栈中移除路由路由守卫: 实现身份验证重定向 嵌套路由: 创建具有共享 UI 的壳路由 错误处理: 处理 404 和导航错误 多个导航器: 管理独立的导航栈
高级模式请参考:references/go_router-guide.md
使用 navigation-patterns.md 获取:
每周安装量
337
代码仓库
GitHub 星标数
87
首次出现
2026年1月22日
安全审计
安装于
opencode282
codex273
gemini-cli270
github-copilot252
kimi-cli235
amp233
Implement navigation and routing in Flutter applications across mobile and web platforms. Choose the right navigation approach, configure deep linking, manage data flow between screens, and handle browser history integration.
Example: assets/navigator_basic.dart
Example: assets/go_router_basic.dart
Flutter team does NOT recommend named routes. They have limitations:
With Navigator:
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailScreen(item: myItem)),
);
With go_router:
context.push('/details?id=123');
// Extract: final id = state.uri.queryParameters['id'];
Example: assets/passing_data.dart
final result = await Navigator.push(
context,
MaterialPageRoute<String>(builder: (context) => SelectionScreen()),
);
if (!context.mounted) return;
Example: assets/returning_data.dart
Android: Configure AndroidManifest.xml intent filters iOS: Configure Info.plist for Universal Links Web: Automatic with go_router, choose URL strategy
For detailed setup: references/deep-linking.md
Hash (default): example.com/#/path - no server config needed Path: example.com/path - cleaner URLs, requires server config
For server setup: references/web-navigation.md
context.go('/path') - replace current routecontext.push('/path') - add to stackcontext.pop() - go backNavigator.push() - add route to stackNavigator.pop() - remove route from stackRoute Guards: Implement authentication redirects Nested Routes: Create shell routes with shared UI Error Handling: Handle 404 and navigation errors Multiple Navigators: Manage independent navigation stacks
For advanced patterns: references/go_router-guide.md
Use navigation-patterns.md for:
Weekly Installs
337
Repository
GitHub Stars
87
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode282
codex273
gemini-cli270
github-copilot252
kimi-cli235
amp233
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装