jonataslaw / getx

Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.
MIT License
10.34k stars 1.62k forks source link

URL will not show for web when using nested navigation #1550

Open AnneAre opened 3 years ago

AnneAre commented 3 years ago

Describe the bug URL will not show for web when using nested navigation. We are working on a project that use get: ^4.1.4 and use nested navigation. Everything is working great on app and on web, except we can't see any path in the url. This works when nested navigation is not used.

**Reproduction code main.dart import 'package:flutter/material.dart'; import 'package:get/get_navigation/src/root/get_material_app.dart'; import 'package:get/get_navigation/src/routes/transitions_type.dart'; import 'package:flutter/foundation.dart' show kIsWeb; import 'package:get/get.dart'; import 'package:my_routing_a/home_level1_page.dart'; import 'package:my_routing_a/home_level2_page.dart'; import 'package:my_routing_a/home_level3_page.dart'; import 'package:my_routing_a/main_tab.dart'; import 'package:url_strategy/url_strategy.dart';

import 'settings_level1_page.dart'; import 'settings_level2_page.dart'; import 'settings_level3_page.dart';

class TheRoutes { // Tab routes static const String home = '/home'; static const String settings = '/settings';

// Other routes (represent pages) static const String level1 = 'level1'; static const String level2 = 'level2'; static const String level3 = 'level3'; static const String changeSettings = 'change-settings'; static const String result = 'result';

// Home tab static const String homeLevel1 = '$home/$level1'; static const String homeLevel2 = '$home/$level2'; static const String homeLevel3 = '$home/$level3'; static const String homeResult = '$home/$result'; static const String homeChangeSettings = '$home/$changeSettings';

// Settings tab static const String settingsLevel1 = '$settings/$level1'; static const String settingsLevel2 = '$settings/$level2'; static const String settingsLevel3 = '$settings/$level3'; static const String settingsChangeSettings = '$settings/$changeSettings'; static const String settingsResult = '$settings/$result';

static Transition get transition => kIsWeb ? Transition.noTransition : Transition.native; }

void main() { setPathUrlStrategy(); runApp(GetMaterialApp( debugShowCheckedModeBanner: false, home: MainTab(), getPages: [ GetPage(name: TheRoutes.homeLevel1, transition: TheRoutes.transition, page: () => HomeLevel1Page()), GetPage(name: TheRoutes.homeLevel2, transition: TheRoutes.transition, page: () => HomeLevel2Page()), GetPage(name: TheRoutes.homeLevel3, transition: TheRoutes.transition, page: () => HomeLevel3Page()), GetPage(name: TheRoutes.settingsLevel1, transition: TheRoutes.transition, page: () => SettingsLevel1Page()), GetPage(name: TheRoutes.settingsLevel2, transition: TheRoutes.transition, page: () => SettingsLevel2Page()), GetPage(name: TheRoutes.settingsLevel3, transition: TheRoutes.transition, page: () => SettingsLevel3Page()), ], )); } // void main() { // runApp(GetMaterialApp(home: Home())); // }

main_tab.dart import 'package:flutter/material.dart';

import 'package:get/get.dart'; import 'package:my_routing_a/home_page.dart'; import 'package:my_routing_a/home_level1_page.dart'; import 'package:my_routing_a/main.dart'; import 'package:my_routing_a/settings_page.dart';

import 'home_level2_page.dart'; import 'home_level3_page.dart'; import 'settings_level1_page.dart'; import 'settings_level2_page.dart'; import 'settings_level3_page.dart';

class MainTab extends StatelessWidget { @override Widget build(BuildContext context) { final controller = Get.put(MainTabController()); return Scaffold( body: TabBarView( controller: controller.tabController, children: [ Navigator( key: Get.nestedKey(1), onGenerateRoute: (route) { WidgetBuilder builder; switch (route.name) { case TheRoutes.homeLevel1: return GetPageRoute( settings: route, page: () => HomeLevel1Page(), ); case TheRoutes.homeLevel2: return GetPageRoute( settings: route, page: () => HomeLevel2Page(), ); case TheRoutes.homeLevel3: return GetPageRoute( settings: route, page: () => HomeLevel3Page(), ); default: return GetPageRoute( settings: route, page: () => HomePage(), ); } }), Navigator( key: Get.nestedKey(2), onGenerateRoute: (route) { WidgetBuilder builder; switch (route.name) { case TheRoutes.settingsLevel1: return GetPageRoute( settings: route, page: () => SettingsLevel1Page(), ); case TheRoutes.settingsLevel2: return GetPageRoute( settings: route, page: () => SettingsLevel2Page(), ); case TheRoutes.settingsLevel3: return GetPageRoute( settings: route, page: () => SettingsLevel3Page(), ); default: return GetPageRoute( settings: route, page: () => SettingsPage(), ); } }, ), ], ), bottomNavigationBar: SafeArea( child: TabBar( controller: controller.tabController, tabs: [ Tab(icon: Icon(Icons.home, color: Colors.black)), Tab(icon: Icon(Icons.settings, color: Colors.black)), ], ), ), ); } }

class MainTabController extends GetxController with SingleGetTickerProviderMixin { TabController? tabController; @override void onInit() { tabController = TabController(vsync: this, length: 2); super.onInit(); } }

class HomePageController extends GetxController { final home = ''.obs; @override void onInit() { print('Call Home'); // called only once home.value = 'HOME'; super.onInit(); } }

class SettingsPageController extends GetxController { final settings = ''.obs; @override void onInit() { print('Call Settings'); // called only once settings.value = 'SETTINGS'; super.onInit(); } }

the child pages are almost empty, and uses this type of code to navigate: ...snip... ElevatedButton( onPressed: () => Get.toNamed(TheRoutes.homeLevel2, id: 1), child: Text('To Level2'), ), ..snip...

To Reproduce Start the project in a browser.

Expected behavior We would expect the url to be shown

Screenshots If applicable, add screenshots to help explain your problem.

Flutter Version: Flutter 2.2.2 • channel stable • https://github.com/flutter/flutter.git Framework • revision d79295af24 (7 days ago) • 2021-06-11 08:56:01 -0700 Engine • revision 91c9fc8fe0 Tools • Dart 2.13.3

Getx Version: get: ^4.1.4

Describe on which device you found the bug: Chrome Version 91.0.4472.77 (Official) (x86_64)

Minimal reproduce code main.dart import 'package:flutter/material.dart'; import 'package:get/get_navigation/src/root/get_material_app.dart'; import 'package:get/get_navigation/src/routes/transitions_type.dart'; import 'package:flutter/foundation.dart' show kIsWeb; import 'package:get/get.dart'; import 'package:my_routing_a/home_level1_page.dart'; import 'package:my_routing_a/home_level2_page.dart'; import 'package:my_routing_a/home_level3_page.dart'; import 'package:my_routing_a/main_tab.dart'; import 'package:url_strategy/url_strategy.dart';

import 'settings_level1_page.dart'; import 'settings_level2_page.dart'; import 'settings_level3_page.dart';

class TheRoutes { // Tab routes static const String home = '/home'; static const String settings = '/settings';

// Other routes (represent pages) static const String level1 = 'level1'; static const String level2 = 'level2'; static const String level3 = 'level3'; static const String changeSettings = 'change-settings'; static const String result = 'result';

// Home tab static const String homeLevel1 = '$home/$level1'; static const String homeLevel2 = '$home/$level2'; static const String homeLevel3 = '$home/$level3'; static const String homeResult = '$home/$result'; static const String homeChangeSettings = '$home/$changeSettings';

// Settings tab static const String settingsLevel1 = '$settings/$level1'; static const String settingsLevel2 = '$settings/$level2'; static const String settingsLevel3 = '$settings/$level3'; static const String settingsChangeSettings = '$settings/$changeSettings'; static const String settingsResult = '$settings/$result';

static Transition get transition => kIsWeb ? Transition.noTransition : Transition.native; }

void main() { setPathUrlStrategy(); runApp(GetMaterialApp( debugShowCheckedModeBanner: false, home: MainTab(), getPages: [ GetPage(name: TheRoutes.homeLevel1, transition: TheRoutes.transition, page: () => HomeLevel1Page()), GetPage(name: TheRoutes.homeLevel2, transition: TheRoutes.transition, page: () => HomeLevel2Page()), GetPage(name: TheRoutes.homeLevel3, transition: TheRoutes.transition, page: () => HomeLevel3Page()), GetPage(name: TheRoutes.settingsLevel1, transition: TheRoutes.transition, page: () => SettingsLevel1Page()), GetPage(name: TheRoutes.settingsLevel2, transition: TheRoutes.transition, page: () => SettingsLevel2Page()), GetPage(name: TheRoutes.settingsLevel3, transition: TheRoutes.transition, page: () => SettingsLevel3Page()), ], )); } // void main() { // runApp(GetMaterialApp(home: Home())); // }

main_tab.dart import 'package:flutter/material.dart';

import 'package:get/get.dart'; import 'package:my_routing_a/home_page.dart'; import 'package:my_routing_a/home_level1_page.dart'; import 'package:my_routing_a/main.dart'; import 'package:my_routing_a/settings_page.dart';

import 'home_level2_page.dart'; import 'home_level3_page.dart'; import 'settings_level1_page.dart'; import 'settings_level2_page.dart'; import 'settings_level3_page.dart';

class MainTab extends StatelessWidget { @override Widget build(BuildContext context) { final controller = Get.put(MainTabController()); return Scaffold( body: TabBarView( controller: controller.tabController, children: [ Navigator( key: Get.nestedKey(1), onGenerateRoute: (route) { WidgetBuilder builder; switch (route.name) { case TheRoutes.homeLevel1: return GetPageRoute( settings: route, page: () => HomeLevel1Page(), ); case TheRoutes.homeLevel2: return GetPageRoute( settings: route, page: () => HomeLevel2Page(), ); case TheRoutes.homeLevel3: return GetPageRoute( settings: route, page: () => HomeLevel3Page(), ); default: return GetPageRoute( settings: route, page: () => HomePage(), ); } }), Navigator( key: Get.nestedKey(2), onGenerateRoute: (route) { WidgetBuilder builder; switch (route.name) { case TheRoutes.settingsLevel1: return GetPageRoute( settings: route, page: () => SettingsLevel1Page(), ); case TheRoutes.settingsLevel2: return GetPageRoute( settings: route, page: () => SettingsLevel2Page(), ); case TheRoutes.settingsLevel3: return GetPageRoute( settings: route, page: () => SettingsLevel3Page(), ); default: return GetPageRoute( settings: route, page: () => SettingsPage(), ); } }, ), ], ), bottomNavigationBar: SafeArea( child: TabBar( controller: controller.tabController, tabs: [ Tab(icon: Icon(Icons.home, color: Colors.black)), Tab(icon: Icon(Icons.settings, color: Colors.black)), ], ), ), ); } }

class MainTabController extends GetxController with SingleGetTickerProviderMixin { TabController? tabController; @override void onInit() { tabController = TabController(vsync: this, length: 2); super.onInit(); } }

class HomePageController extends GetxController { final home = ''.obs; @override void onInit() { print('Call Home'); // called only once home.value = 'HOME'; super.onInit(); } }

class SettingsPageController extends GetxController { final settings = ''.obs; @override void onInit() { print('Call Settings'); // called only once settings.value = 'SETTINGS'; super.onInit(); } }

Best regards, Are Refsdal

nathansaas commented 3 years ago

Hey there, Just use "reportsRouteUpdateToEngine" on Navigator widget as true and browser url will be updated.