0
votes

Image is not coming but all the data in the firebase database is showing in the app.

import 'package:flutter/material.dart';
import 'Authentication.dart';
import 'photoUpload.dart';
import 'Posts.dart';
import 'package:firebase_database/firebase_database.dart';
// import 'package:flutter_blogapp/Authentication.dart';
// import 'package:flutter_blogapp/photoUpload.dart';


class HomePage extends StatefulWidget
{
  HomePage 
(
  {
    this.auth,
    this.onSignedOut,
  }
);
final AuthImplementation auth;
final VoidCallback onSignedOut;

  @override
  State<StatefulWidget> createState() 
  {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage>
{

  List<Posts> postsList = [];

  @override
  void initState() 
  {
    super.initState();

    DatabaseReference postsRef = FirebaseDatabase.instance.reference().child("Posts");

    postsRef.once().then((DataSnapshot snap)
    {
      var KEYS = snap.value.keys;
      var DATA = snap.value;

      postsList.clear();

      for(var individualKey in KEYS)
      {
        Posts posts = new Posts
        (
          DATA[individualKey]['image'],
          DATA[individualKey]['description'],
          DATA[individualKey]['data'],
          DATA[individualKey]['time'], 
        );

        postsList.add(posts);
      }

      setState(() 
      {
        print('Length : $postsList.length');
      });
    });
  }

  void _logoutUser() async
  {
    try 
    {
      await widget.auth.signOut();
      widget.onSignedOut();
    } 
    catch (e) 
    {
      print(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) 
  {
    return new Scaffold
    (
      appBar:  new AppBar
      (
        title: new Text('Home'),
      ),


      body : new Container
      (
        child: postsList.length == 0 ? new Text(" No Post available ") : new ListView.builder
        (
          itemCount: postsList.length,
          itemBuilder: (_, index)
          //itemBuilder: (BuildContext _, int index ) //<-----
          {
            return PostsUI(postsList[index].image, postsList[index].description, postsList[index].date, postsList[index].time);
          }
        ),
      ),

      bottomNavigationBar: new BottomAppBar
      (
        color: Colors.pink,

        child: new Container
        (
          margin: const EdgeInsets.only(left: 70.0, right: 70.0),
          child: new Row
          (
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            mainAxisSize: MainAxisSize.max,

            children: <Widget>
            [
              new IconButton
              (
                icon: new Icon(Icons.local_car_wash),
                iconSize: 50,
                color: Colors.white, 

                onPressed: _logoutUser,

              ),

              new IconButton
              (
                icon: new Icon(Icons.add_a_photo),
                iconSize: 50,
                color: Colors.white,

                onPressed: ()
                {
                  Navigator.push
                  (
                    context, 
                    MaterialPageRoute(builder: (context)
                    {
                      return new UploadPhotoPage();
                    })
                  );
                },

              ),
            ],

          ),
        ),
      ),


    );
  }

  // Designing Posts UI 

  Widget PostsUI(String image, String description, String date, String time)
  {
    return new Card
    (
      elevation: 10.0,
      margin: EdgeInsets.all(15.0),


      child: new Container
      (
        padding: new EdgeInsets.all(14.0),

        child: new Column
        (
          crossAxisAlignment: CrossAxisAlignment.start,

          children: <Widget>
          [
            new Row
            (
              mainAxisAlignment: MainAxisAlignment.spaceBetween,

              children: <Widget>
              [
                new Text
                (
                  date,
                  style: Theme.of(context).textTheme.subtitle,
                  textAlign: TextAlign.center,
                ),

                new Text
                (
                  time,
                  style: Theme.of(context).textTheme.subtitle,
                  textAlign: TextAlign.center,
                ),                  //<----
              ],
            ),

            SizedBox(height: 10.0,),

            new Image.network(image, fit:BoxFit.cover),

            SizedBox(height: 10.0,),

            new Text
                (
                  description,  
                  style: Theme.of(context).textTheme.subhead,
                  textAlign: TextAlign.center,
                ),


          ],

        )



      ) 

    );

  }
}

The following errors are showing:

═══════ Exception caught by image resource service ════════════════════════════ The following ArgumentError was thrown resolving an image codec: Invalid argument(s): No host specified in URI file:///image

When the exception was thrown, this was the stack

0 _HttpClient._openUrl (dart:_http/http_impl.dart:2276:9)

1 _HttpClient.getUrl (dart:_http/http_impl.dart:2197:48)

2 NetworkImage._loadAsync package:flutter/…/painting/_network_image_io.dart:84

3 NetworkImage.load package:flutter/…/painting/_network_image_io.dart:47

4 ImageProvider.resolve...

package:flutter/…/painting/image_provider.dart:327 ... Image provider: NetworkImage("image", scale: 1.0) Image key: NetworkImage("image", scale: 1.0)

1
what's in your image field? can you debug and see the value of image field? is it getting the correct url, the error is because the image string provided is either unreachable, or not loading, try to debug, see the value of image field, and try that link in browser first - dlohani
Hello Frank, hru? Thanks for your suggestion. I have debug it and get the error where i am wrong. Thanks - RhlSin

1 Answers

0
votes

The main part of the error message is:

Invalid argument(s): No host specified in URI file:///image

From this it looks like you're storing a local file:/// reference into the database, instead of a globally accessible URL (typically starting with http:// or https://).

The solution is in the code that writes to the database, to actually upload the image to a public storage place (such as to Firebase Storage) and then write the resulting download URL into the database.