search

FilledStacks / flutter-tutorials

The repo contains the source code for all the tutorials on the FilledStacks Youtube channel.
MIT License
4.75k stars 1.76k forks source link

Implement Bottom Nav Bar using Stacked and Navigation Service #86

Open akyjoe opened 4 years ago

akyjoe commented 4 years ago

We were working on custom bottom navigation bar using GestureDetector to navigate through different states. But it's increasing the Firebase Reads every the screen is built. With your recent update where IndexTrackingViewModel is included, we want to understand how to implement with a multi-route App and NavigationService.

In our scenario we have Splash Screen Navigates to HomeScreen. Bottom Navigation is visible in three screens, each of the following screen uses a custom stateless class CustomBottomNavigation which returns BottomNavigationBar.

  1. HomeScreen with Multi Widgets and Navigation Text Links
  2. FirebaseList Screen with Sliver List (OnTap of List Item) Firebase List Item Detail Screen.
  3. User Screen with Sliver List (OnTap of List Item) Firebase List Item Detail Screen.

Right now the navigation is controlled using Router as explained in your tutorial.

Do we have to extend IndexTrackingViewModel to each of the above three viewmodels which are currently extending BaseModel?

akyjoe commented 4 years ago

We are able to use Bottom navigation bar, by adding parent view "HomeView" in which we are calling all the child views. Views are working just fine.

Now our issue is about the DataService is been called each time, on swap of views. Below is our code for locator.dart

locator.registerLazySingleton(() => DialogService());
locator.registerLazySingleton(() => NavigationService());
locator.registerLazySingleton(() => AuthenticationService());
locator.registerLazySingleton(() => DataService()); 

locator.registerSingleton<ViewModel1>(ViewModel1());
locator.registerSingleton<ViewModel2>(ViewModel2());
locator.registerSingleton<ViewModel3>(ViewModel3());

In the view we have added initialiseSpecialViewModelsOnce: true viewModelBuilder: () => locator<ViewModel1>() as well.

When we execute:

flutter: Error while creating DataService
flutter: Stack trace:
 #0      defaultBinaryMessenger.<anonymous closure> (package:flutter/src/services/binary_messenger.dart:76:7)
#1      defaultBinaryMessenger (package:flutter/src/services/binary_messenger.dart:89:4)
#2      MethodChannel.binaryMessenger (package:flutter/src/services/platform_channel.dart:140:62)
#3      MethodChannel.setMethodCallHandler (package:flutter/src/services/platform_channel.dart:375:5)
#4      new MethodChannelFirestore (package:cloud_firestore_platform_interface/src/method_channel/method_channel_firestore.dart:27:13)
#5      FirestorePlatform.instance (package:cloud_firestore_platform_interface/cloud_firestore_platform_interface.dart:63:19)
#6      new Firestore (package:cloud_firestore/src/firestore.dart:26:42)
#7      Firestore.instance (package:cloud_firestore/src/firestore.dart:29:36)
#8      new DataService (package:Vaccine/app/service/data.dart:14:67)
#9      setupLocator.<anonymous closure> (package:Vaccine/app/locator.dart:21:39)
#10     _ServiceFactory.getObject (package:get_it/get_it_impl.dart:128:40)
#11     _GetItImplementation.get (package:get_it/get_it_impl.dart:276:34)
#12     _GetItImplementation.call (package:get_it/get_it_impl.dart:288:12)
#13     new AuthenticationService (package:Vaccine/app/service/auth.dart:10:43)
#14     setupLocator.<anonymous closure> (package:Vaccine/app/locator.dart:19:39)
#15     _ServiceFactory.getObject (package:get_it/get_it_impl.dart:128:40)
#16     _GetItImplementation.get (package:get_it/get_it_impl.dart:276:34)
#17     _GetItImplementation.call (package:get_it/get_it_impl.dart:288:12)
#18     new ScheduleScreenModel (package:Vaccine/app/screenmodels/view_model_1.dart:14:63)
#19     setupLocator (package:Vaccine/app/locator.dart:24:50)
#20     main (package:Vaccine/main.dart:9:3)
#21     _runMainZoned.<anonymous closure>.<anonymous closure> (dart:ui/hooks.dart:241:25)
#22     _rootRun (dart:async/zone.dart:1184:13)
#23     _CustomZone.run (dart:async/zone.dart:1077:19)
#24     _runZoned (dart:async/zone.dart:1619:10)
#25     runZonedGuarded (dart:async/zone.dart:1608:12)
#26     _runMainZoned.<anonymous closure> (dart:ui/hooks.dart:233:5)
#27     _startIsolate.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:301:19)
#28     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:168:12)
flutter: Error while creating AuthenticationService
flutter: Stack trace:
 #0      defaultBinaryMessenger.<anonymous closure> (package:flutter/src/services/binary_messenger.dart:76:7)
#1      defaultBinaryMessenger (package:flutter/src/services/binary_messenger.dart:89:4)
#2      MethodChannel.binaryMessenger (package:flutter/src/services/platform_channel.dart:140:62)
#3      MethodChannel.setMethodCallHandler (package:flutter/src/services/platform_channel.dart:375:5)
#4      new MethodChannelFirestore (package:cloud_firestore_platform_interface/src/method_channel/method_channel_firestore.dart:27:13)
#5      FirestorePlatform.instance (package:cloud_firestore_platform_interface/cloud_firestore_platform_interface.dart:63:19)
#6      new Firestore (package:cloud_firestore/src/firestore.dart:26:42)
#7      Firestore.instance (package:cloud_firestore/src/firestore.dart:29:36)
#8      new DataService (package:Vaccine/app/service/data.dart:14:67)
#9      setupLocator.<anonymous closure> (package:Vaccine/app/locator.dart:21:39)
#10     _ServiceFactory.getObject (package:get_it/get_it_impl.dart:128:40)
#11     _GetItImplementation.get (package:get_it/get_it_impl.dart:276:34)
#12     _GetItImplementation.call (package:get_it/get_it_impl.dart:288:12)
#13     new AuthenticationService (package:Vaccine/app/service/auth.dart:10:43)
#14     setupLocator.<anonymous closure> (package:Vaccine/app/locator.dart:19:39)
#15     _ServiceFactory.getObject (package:get_it/get_it_impl.dart:128:40)
#16     _GetItImplementation.get (package:get_it/get_it_impl.dart:276:34)
#17     _GetItImplementation.call (package:get_it/get_it_impl.dart:288:12)
#18     new ScheduleScreenModel (package:Vaccine/app/screenmodels/view_model_1.dart:14:63)
#19     setupLocator (package:Vaccine/app/locator.dart:24:50)
#20     main (package:Vaccine/main.dart:9:3)
#21     _runMainZoned.<anonymous closure>.<anonymous closure> (dart:ui/hooks.dart:241:25)
#22     _rootRun (dart:async/zone.dart:1184:13)
#23     _CustomZone.run (dart:async/zone.dart:1077:19)
#24     _runZoned (dart:async/zone.dart:1619:10)
#25     runZonedGuarded (dart:async/zone.dart:1608:12)
#26     _runMainZoned.<anonymous closure> (dart:ui/hooks.dart:233:5)
#27     _startIsolate.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:301:19)
#28     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:168:12)

Code for view_mode_1.dart 14:63 is:

final AuthenticationService _authenticationService = locator<AuthenticationService>();
final DataService _dataService = locator<DataService>();

Kindly suggest how to rectify this?