Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for web. #114

Merged
merged 20 commits into from
Jan 6, 2022
Merged

Add support for web. #114

merged 20 commits into from
Jan 6, 2022

Conversation

letsintegreat
Copy link
Contributor

Program

  • CodePeak
  • Script Winter of Code
  • None

Issue

Fixes #113

@Saransh-cpp Saransh-cpp self-requested a review December 29, 2021 20:50
@Saransh-cpp Saransh-cpp added Bonus Bonus issue for CodePeak CodePeak refactor Refactor the code! labels Dec 29, 2021
Copy link
Owner

@Saransh-cpp Saransh-cpp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @letsintegreat! A lot of work done here might need a few iterations. Awesome work!
I get the following error when opening up the drawer -

======== Exception caught by widgets library =======================================================
The following assertion was thrown building CustomListTile(dirty):
setState() or markNeedsBuild() called during build.

This Overlay widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was: Overlay-[LabeledGlobalKey<OverlayState>#55e0b]
  dependencies: [_EffectiveTickerMode]
  state: OverlayState#899d3(entries: [OverlayEntry#61d13(opaque: true; maintainState: false), OverlayEntry#33197(opaque: false; maintainState: true), OverlayEntry#f7753(opaque: false; maintainState: false), OverlayEntry#8f7bf(opaque: false; maintainState: true)])
The widget which was currently being built when the offending call was made was: CustomListTile
  dirty
The relevant error-causing widget was: 
  CustomListTile CustomListTile:file:///C:/Users/Saransh/OneDrive/Desktop/BookRentApp-Chapter3/lib/Screens/Home.dart:60:21
When the exception was thrown, this was the stack: 
#0      Element.markNeedsBuild.<anonymous closure> (package:flutter/src/widgets/framework.dart:4261:11)
#1      Element.markNeedsBuild (package:flutter/src/widgets/framework.dart:4276:6)
#2      State.setState (package:flutter/src/widgets/framework.dart:1108:15)
#3      OverlayState.rearrange (package:flutter/src/widgets/overlay.dart:444:5)
#4      NavigatorState._flushHistoryUpdates (package:flutter/src/widgets/navigator.dart:3908:16)
#5      NavigatorState._pushEntry (package:flutter/src/widgets/navigator.dart:4395:5)
#6      NavigatorState.push (package:flutter/src/widgets/navigator.dart:4323:5)
#7      Navigator.push (package:flutter/src/widgets/navigator.dart:2016:34)
#8      _HomeState.build.<anonymous closure> (package:book_rent_app_chapter3/Screens/Home.dart:64:41)
#9      CustomListTile.build (package:book_rent_app_chapter3/Widgets.dart:22:25)
#10     StatelessElement.build (package:flutter/src/widgets/framework.dart:4662:28)
#11     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4588:15)
#12     Element.rebuild (package:flutter/src/widgets/framework.dart:4311:5)
#13     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4566:5)
#14     ComponentElement.mount (package:flutter/src/widgets/framework.dart:4561:5)
#15     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3631:14)
#16     MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6261:36)
#17     MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6272:32)
...     Normal element mounting (45 frames)
#62     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3631:14)
#63     Element.updateChild (package:flutter/src/widgets/framework.dart:3383:18)
#64     SliverMultiBoxAdaptorElement.updateChild (package:flutter/src/widgets/sliver.dart:1243:37)
#65     SliverMultiBoxAdaptorElement.createChild.<anonymous closure> (package:flutter/src/widgets/sliver.dart:1228:20)
#66     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2531:19)
#67     SliverMultiBoxAdaptorElement.createChild (package:flutter/src/widgets/sliver.dart:1221:12)
#68     RenderSliverMultiBoxAdaptor._createOrObtainChild.<anonymous closure> (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:349:23)
#69     RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:1962:59)
#70     PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:910:15)
#71     RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:1962:14)
#72     RenderSliverMultiBoxAdaptor._createOrObtainChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:338:5)
#73     RenderSliverMultiBoxAdaptor.insertAndLayoutChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:484:5)
#74     RenderSliverList.performLayout.advance (package:flutter/src/rendering/sliver_list.dart:239:19)
#75     RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:281:12)
#76     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#77     RenderSliverEdgeInsetsPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:137:12)
#78     RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:371:11)
#79     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#80     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:510:13)
#81     RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1580:12)
#82     RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1489:20)
#83     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#84     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#85     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#86     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#87     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#88     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#89     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#90     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#91     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#92     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#93     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#94     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#95     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#96     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#97     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#98     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#99     RenderCustomPaint.performLayout (package:flutter/src/rendering/custom_paint.dart:545:11)
#100    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#101    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#102    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#103    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#104    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#105    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#106    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#107    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#108    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#109    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#110    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#111    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#112    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#113    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#114    _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1376:11)
#115    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#116    RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:277:14)
#117    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#118    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#119    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#120    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#121    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#122    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#123    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#124    RenderPositionedBox.performLayout (package:flutter/src/rendering/shifted_box.dart:437:14)
#125    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#126    RenderPositionedBox.performLayout (package:flutter/src/rendering/shifted_box.dart:437:14)
#127    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#128    ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:56:11)
#129    RenderStack._computeSize (package:flutter/src/rendering/stack.dart:570:43)
#130    RenderStack.performLayout (package:flutter/src/rendering/stack.dart:597:12)
#131    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#132    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#133    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#134    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#135    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#136    MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:171:12)
#137    _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:1112:7)
#138    MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:240:7)
#139    RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:403:14)
#140    RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1707:7)
#141    PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:879:18)
#142    RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:497:19)
#143    WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:883:13)
#144    RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:363:5)
#145    SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1145:15)
#146    SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1082:9)
#147    SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:996:5)
#151    _invoke (dart:ui/hooks.dart:150:10)
#152    PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:270:5)
#153    _drawFrame (dart:ui/hooks.dart:114:31)
(elided 3 frames from dart:async)
====================================================================================================

======== Exception caught by widgets library =======================================================
'package:flutter/src/widgets/navigator.dart': Failed assertion: line 4386 pos 12: '!_debugLocked': is not true.
The relevant error-causing widget was: 
  CustomListTile CustomListTile:file:///C:/Users/Saransh/OneDrive/Desktop/BookRentApp-Chapter3/lib/Screens/Home.dart:69:21
====================================================================================================

======== Exception caught by widgets library =======================================================
'package:flutter/src/widgets/navigator.dart': Failed assertion: line 4386 pos 12: '!_debugLocked': is not true.
The relevant error-causing widget was: 
  CustomListTile CustomListTile:file:///C:/Users/Saransh/OneDrive/Desktop/BookRentApp-Chapter3/lib/Screens/Home.dart:100:21
====================================================================================================
D/FirebaseAuth(27100): Notifying id token listeners about a sign-out event.
D/FirebaseAuth(27100): Notifying auth state listeners about a sign-out event.

======== Exception caught by widgets library =======================================================
'package:flutter/src/widgets/navigator.dart': Failed assertion: line 4386 pos 12: '!_debugLocked': is not true.
The relevant error-causing widget was: 
  CustomListTile CustomListTile:file:///C:/Users/Saransh/OneDrive/Desktop/BookRentApp-Chapter3/lib/Screens/Home.dart:109:21
====================================================================================================
E/flutter (27100): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: 'package:flutter/src/widgets/navigator.dart': Failed assertion: line 2841 pos 18: '!navigator._debugLocked': is not true.
E/flutter (27100): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:47:61)
E/flutter (27100): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
E/flutter (27100): #2      _RouteEntry.handlePush.<anonymous closure> (package:flutter/src/widgets/navigator.dart:2841:18)
E/flutter (27100): #3      TickerFuture.whenCompleteOrCancel.thunk (package:flutter/src/scheduler/ticker.dart:407:15)
E/flutter (27100): #4      _rootRunUnary (dart:async/zone.dart:1436:47)
E/flutter (27100): #5      _CustomZone.runUnary (dart:async/zone.dart:1335:19)
E/flutter (27100): <asynchronous suspension>
E/flutter (27100): #6      TickerFuture.whenCompleteOrCancel.thunk (package:flutter/src/scheduler/ticker.dart)
E/flutter (27100): <asynchronous suspension>
E/flutter (27100): 

======== Exception caught by widgets library =======================================================
'package:flutter/src/widgets/navigator.dart': Failed assertion: line 4386 pos 12: '!_debugLocked': is not true.
The relevant error-causing widget was: 
  CustomListTile CustomListTile:file:///C:/Users/Saransh/OneDrive/Desktop/BookRentApp-Chapter3/lib/Screens/Home.dart:116:21
====================================================================================================

======== Exception caught by foundation library ====================================================
setState() or markNeedsBuild() called during build.
====================================================================================================

I have also added a few comments below, will get back to you once these issues are solved!

pubspec.yaml Outdated Show resolved Hide resolved
pubspec.yaml Outdated Show resolved Hide resolved
lib/main.dart Outdated
Comment on lines 25 to 27
await Firebase.initializeApp(
options: FirebaseOptions(apiKey: "AIzaSyCdQgjJ7kTZ_NxrW-1ReuvInOYyXJTwRTA", appId: "1:154108809680:web:f0f9b39d6f5bdbfbfb29d5", messagingSenderId: "154108809680", projectId: "bookrentapp"),
);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
await Firebase.initializeApp(
options: FirebaseOptions(apiKey: "AIzaSyCdQgjJ7kTZ_NxrW-1ReuvInOYyXJTwRTA", appId: "1:154108809680:web:f0f9b39d6f5bdbfbfb29d5", messagingSenderId: "154108809680", projectId: "bookrentapp"),
);
if (Firebase.apps.isEmpty) {
await Firebase.initializeApp();
}else {
Firebase.app(); // if already initialized, use that one
}

Why are these API keys used? I found an issue with this code and the StackOverflow solution worked :D

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am getting this error if I don't pass FirebaseOptions:

Error: Assertion failed: file:///C:/Users/Harshit/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/firebase_core_web-1.5.3/lib/src/firebase_core_web.dart:273:11
options != null
"FirebaseOptions cannot be null when creating the default app."
    at Object.throw_ [as throw] (http://localhost:60983/dart_sdk.js:5063:11)
    at Object.assertFailed (http://localhost:60983/dart_sdk.js:4988:15)
    at firebase_core_web.FirebaseCoreWeb.new.initializeApp (http://localhost:60983/packages/firebase_core_web/firebase_core_web.dart.lib.js:252:42)
    at initializeApp.next (<anonymous>)
    at http://localhost:60983/dart_sdk.js:40192:33
    at _RootZone.runUnary (http://localhost:60983/dart_sdk.js:40062:59)
    at _FutureListener.thenAwait.handleValue (http://localhost:60983/dart_sdk.js:34983:29)
    at handleValueCallback (http://localhost:60983/dart_sdk.js:35551:49)
    at Function._propagateToListeners (http://localhost:60983/dart_sdk.js:35589:17)
    at _Future.new.[_completeWithValue] (http://localhost:60983/dart_sdk.js:35437:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:60983/dart_sdk.js:35458:35)
    at Object._microtaskLoop (http://localhost:60983/dart_sdk.js:40330:13)
    at _startMicrotaskLoop (http://localhost:60983/dart_sdk.js:40336:13)
    at http://localhost:60983/dart_sdk.js:35811:9

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this while firing up the app on the web? Or on Android too?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Saransh-cpp Weird, it is working fine on Android, but giving this error if I try to run on chrome without passing FirebaseOptions.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@letsintegreat, as I mentioned on Discord, this does apparently require the options argument. Please add it back in.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@letsintegreat, as I mentioned on Discord, this does apparently require the options argument. Please add it back in.

Done!

Copy link
Owner

@Saransh-cpp Saransh-cpp Jan 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason, it still gives me the same error (after adding the if-else block). You'll probably need to debug this a bit. Works fine on the web!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Saransh-cpp Yeah, I have fixed it! Now the app's running on both android and web.

@letsintegreat
Copy link
Contributor Author

@Saransh-cpp I have fixed the drawer issue, please check.

@Saransh-cpp
Copy link
Owner

Please resolve the merge conflicts

@letsintegreat
Copy link
Contributor Author

Please resolve the merge conflicts

Done!

@Saransh-cpp Saransh-cpp self-requested a review January 3, 2022 14:44
@Saransh-cpp Saransh-cpp mentioned this pull request Jan 3, 2022
Copy link
Owner

@Saransh-cpp Saransh-cpp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@letsintegreat you'll need to edit the google-services.json a bit. Replace all the occurrences of test_app with book_rent_app_chapter3.

@letsintegreat
Copy link
Contributor Author

@letsintegreat you'll need to edit the google-services.json a bit. Replace all the occurrences of test_app with book_rent_app_chapter3.

Are you sure about this? I think the package name in google-services.json should match with the package name given in the firebase console. And as I can see, the package name in firebase console still has test_app.

@letsintegreat
Copy link
Contributor Author

letsintegreat commented Jan 3, 2022

As the package name of your android app in the firebase console is not editable, I think the best course of action would be to delete the current app from the console and add a new android app with the correct package name, then download the auto-generated google-services.json and replace it with the current one.

After some research, I found this, here an employee of firebase is also suggesting the same. Also, if we scroll a bit, we can find users who had problems after editing google-service.json manually.

@Saransh-cpp
Copy link
Owner

As the package name of your android app in the firebase console is not editable, I think the best course of action would be to delete the current app from the console and add a new android app with the correct package name, then download the auto-generated google-services.json and replace it with the current one.

After some research, I found this, here an employee of firebase is also suggesting the same. Also, if we scroll a bit, we can find users who had problems after editing google-service.json manually.

I think we can edit the file as the app is not in production. I'll definitely create a new android project in firebase once we plan to put the app on the play store.

@letsintegreat
Copy link
Contributor Author

@Saransh-cpp Alright then, pushing the said changes.

@letsintegreat
Copy link
Contributor Author

@Saransh-cpp Done!

lib/main.dart Outdated Show resolved Hide resolved
Copy link
Owner

@Saransh-cpp Saransh-cpp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @letsintegreat! A minor comment below. I'll merge once it is resolved!

lib/Screens/Loading.dart Show resolved Hide resolved
@Saransh-cpp Saransh-cpp merged commit 22147f6 into Saransh-cpp:master Jan 6, 2022
@letsintegreat letsintegreat deleted the issue-113-add-web branch January 6, 2022 08:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bonus Bonus issue for CodePeak CodePeak refactor Refactor the code!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for web.
2 participants