Home > Software design >  Dart Flutter Error calling photo via Firebase Storage
Dart Flutter Error calling photo via Firebase Storage

Time:04-04

I have a code like this:

    class MainScreen extends StatefulWidget {
      @override
      State<MainScreen> createState() => _MainScreenState();
    }
    class _MainScreenState extends State<MainScreen> {
      @override
      Widget build(BuildContext context) {
        return Column(
          children: <Widget>[
            Column(
              children: [
                Container(
                  height: 100,
                  width: 100,
                  child: FutureBuilder<String>(
                    future: downloadURLExample(),
                    builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
                      if(snapshot.hasData) 
                      return Image.network(snapshot.data);
                    }
                  ),
                ),
                SizedBox(height: 10),
                Text(
                  "Hello",
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ] 
        );
      }
    }
  Future<String> downloadURLExample() {
    var downloadURL = FirebaseStorage.instance.ref('defaultProfilePhoto.png').getDownloadURL();
    return downloadURL;
  }

My goal is to show the photo I uploaded to Firebase Storage in the app. Firebase Storage:

enter image description here


When I run the codes it redirects me to the throw FlutterError.fromParts(<DiagnosticsNode>[ line of code of debug.dart.

Also console:

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building FutureBuilder<String>(dirty, state: _FutureBuilderState<String>#a8e50):
A build function returned null.

The offending widget is: FutureBuilder<String>
Build functions must never return null.

To return an empty space that causes the building widget to fill available room, return "Container()". To return an empty space that takes as little room as possible, return "Container(width: 0.0, height: 0.0)".

The relevant error-causing widget was
FutureBuilder<String>
When the exception was thrown, this was the stack
#0      debugWidgetBuilderValue.<anonymous closure>
#1      debugWidgetBuilderValue
#2      ComponentElement.performRebuild
#3      StatefulElement.performRebuild
#4      Element.rebuild
#5      ComponentElement._firstBuild
#6      StatefulElement._firstBuild
#7      ComponentElement.mount
...     Normal element mounting (10 frames)
#17     Element.inflateWidget
#18     MultiChildRenderObjectElement.inflateWidget
#19     MultiChildRenderObjectElement.mount
#20     Element.inflateWidget
#21     MultiChildRenderObjectElement.inflateWidget
#22     MultiChildRenderObjectElement.mount
...     Normal element mounting (198 frames)
#220    Element.inflateWidget
#221    MultiChildRenderObjectElement.inflateWidget
#222    MultiChildRenderObjectElement.mount
...     Normal element mounting (126 frames)
#348    Element.inflateWidget
#349    MultiChildRenderObjectElement.inflateWidget
#350    MultiChildRenderObjectElement.mount
...     Normal element mounting (45 frames)
#395    Element.inflateWidget
#396    MultiChildRenderObjectElement.inflateWidget
#397    MultiChildRenderObjectElement.mount
...     Normal element mounting (15 frames)
#412    Element.inflateWidget
#413    MultiChildRenderObjectElement.inflateWidget
#414    MultiChildRenderObjectElement.mount
...     Normal element mounting (206 frames)
#620    Element.inflateWidget
#621    MultiChildRenderObjectElement.inflateWidget
#622    MultiChildRenderObjectElement.mount
...     Normal element mounting (362 frames)
#984    Element.inflateWidget
#985    Element.updateChild
#986    RenderObjectToWidgetElement._rebuild
#987    RenderObjectToWidgetElement.mount
#988    RenderObjectToWidgetAdapter.attachToRenderTree.<anonymous closure>
#989    BuildOwner.buildScope
#990    RenderObjectToWidgetAdapter.attachToRenderTree
#991    WidgetsBinding.attachRootWidget
#992    WidgetsBinding.scheduleAttachRootWidget.<anonymous closure>
(elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
════════════════════════════════════════════════════════════════════════════════
Restarted application in 2.960ms.
W/DynamiteModule( 7575): Local module descriptor class for com.google.android.gms.providerinstaller.dynamite not found.
I/DynamiteModule( 7575): Considering local module com.google.android.gms.providerinstaller.dynamite:0 and remote module com.google.android.gms.providerinstaller.dynamite:0
W/ProviderInstaller( 7575): Failed to load providerinstaller module: No acceptable module com.google.android.gms.providerinstaller.dynamite found. Local version is 0 and remote version is 0.
W/ProviderInstaller( 7575): Failed to report request stats: com.google.android.gms.common.security.ProviderInstallerImpl.reportRequestStats [class android.content.Context, long, long]
W/ConnectivityManager.CallbackHandler( 7575): callback not found for CALLBACK_AVAILABLE message
W/NetworkRequest( 7575): No App Check token for request.

My goal is to show the image I uploaded to Firebase Storage in Flutter app. How can I solve this problem? Thanks in advance for the help.

CodePudding user response:

I think the problem comes from here:

builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
  if(snapshot.hasData) 
    return Image.network(snapshot.data);
}

You'll need to return something, even when the snapshot doesn't have data (yet). For example:

builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
  if(snapshot.hasData) 
    return Image.network(snapshot.data);
  return CircularProgressIndicator(); //            
  • Related