flutter firestore image：如何通过firebase firestore中的url显示图像？

Question

我在控制台中获取图像 url，它正在其中打印，但我无法在容器内显示图像。这是带有点指示器和删除按钮的完整代码。此代码工作正常，因为如果我直接通过云存储获取图像，但无法通过存储在图像集合中的图像集合中存储在数组中的图像集合中，索引上传为地图，我可以显示图像。但是正如我在下面的代码中提到的，url 会在控制台中打印出来。请检查一下。 PS：第二页和第三页可能与查询相关，也可能不相关，但它可能会帮助试图获取点指示符或删除按钮或完整图像视图的人，因为如果我直接通过云存储获取图像，此代码可以正常工作。谢谢你的时间。

   class PortfolioGallarySubPageTWO extends StatefulWidget{


 int currentIndex;
 List<String> imageList;


 PortfolioGallarySubPageTWO({Key key,@required this.imageList,@required this.currentIndex})
  :super(key:key);

 @override
 _PortfolioGallarySubPageTWO createState() => _PortfolioGallarySubPageTWO();
  }

 class _PortfolioGallarySubPageTWO extends State<PortfolioGallarySubPageTWO>
  with SingleTickerProviderStateMixin {


 final GlobalKey<FormState> formKey = new GlobalKey<FormState>();
 final GlobalKey<ScaffoldState> key = new GlobalKey<ScaffoldState>();

 final _stoarge = FirebaseStorage.instance;
 final CollectionReference _reference = FirebaseFirestore.instance.collection(
  "users");
 final auth = FirebaseAuth.instance;

 final FirebaseFirestore fb = FirebaseFirestore.instance;


 List<File> _images = [];
 List<String> imageList = [];
 int currentIndex;



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

   @override
   void dispose() {
    super.dispose();
   }


    @override
   Widget build(BuildContext context) {
    return Scaffold(
      key: key,
    extendBodyBehindAppBar: true,
    appBar: AppBar(
      elevation: 0,
      backgroundColor: Colors.transparent,
       actions: [
         ElevatedButton(
           child: Text("DONE", style: TextStyle(fontSize: 15)),
           onPressed: () {
          _uploadImages();
        },
        style: ElevatedButton.styleFrom(
            padding: EdgeInsets.fromLTRB(25.0, 15.0, 25.0, 10.0),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30.0))),
      ),
    ],
  ),
  body: Container(
    width: _maxScreenWidth,
    child: SafeArea(
      child: Form(
        key: formKey,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [

              
              Container(

                height: 160.0,
                padding: EdgeInsets.symmetric(vertical: 15.0,horizontal: 15.0),

                child: CustomScrollView(
                 
                  physics: const BouncingScrollPhysics(),


                  slivers: <Widget>[
                    SliverPadding(

                      padding: const EdgeInsets.all(10),
                      sliver:
                      _buildContentTWO(imageList),

                    )
                  ],
                ),
              ),


            ],
          ),
        ),
      ),
    ),
  ),
);
   }



    _getImagesOK() async {
    DocumentSnapshot firebaseDoc = await FirebaseFirestore.instance.collection(
      "users").doc(auth.currentUser.uid).get();

     List imageList = firebaseDoc.data()['images'];

     print(imageList[0]);

     String _u = await imageList.toString();


    imageList.add(_u);
    setState(() {
      print(imageList.length);
     print(imageList);
      });
    }


    SliverGrid _buildContentTWO(List<String> imageList) {
    return SliverGrid(

      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 150,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
  ),
  delegate: SliverChildBuilderDelegate(

        (BuildContext context, int index) {
      return PortfolioGalleryImageWidgetTWO(imageList: imageList[index],
        onImageTap: () =>
            Navigator.push(context,
              _createGalleryDetail(imageList, index),
            ),
      );
    },
    childCount: imageList.length,
  ),

);
 }

    MaterialPageRoute _createGalleryDetail(List<String> imageList, int index) {
   return MaterialPageRoute(builder: (context) =>
      PortfolioGalleryDetailPageTWO(
        imageList: imageList,
         currentIndex: index,
        ),
    );
  }

}

第二页：该页面用于DOT指标，并获取索引并显示在图像上

   class PortfolioGalleryDetailPageTWO extends StatefulWidget{
   final List<String> imageList;
   final int currentIndex;

   PortfolioGalleryDetailPageTWO({Key key, @required this.imageList,@required this.currentIndex})
  : super(key: key);

   @override
  _PortfolioGalleryDetailPageTWO createState() => _PortfolioGalleryDetailPageTWO();
}

   class _PortfolioGalleryDetailPageTWO extends State<PortfolioGalleryDetailPageTWO>{
    int _currentIndex;
   PageController _pageController;

    @override
    void initState(){
   super.initState();
    _currentIndex = widget.currentIndex;
   _pageController = PageController(initialPage: _currentIndex);
    }

   final auth = FirebaseAuth.instance;

   @override
   Widget build (BuildContext context){

return Scaffold(
  backgroundColor: Colors.black,
  appBar: AppBar(backgroundColor: Colors.black,),
  body: _buildContent(),
);
  }

  Widget _buildContent(){

return Stack(
  children: [
    _buildPhotoViewGallery(),
    _buildIndicator(),
    _deleteImage(),
  ],
);
 }

   Widget _deleteImage(){
   return Positioned(
     right: -2,
   top: -9,
  child: new Deletebtn(),
);
   }



     Widget _buildIndicator(){
    return Positioned(
    bottom: 2.0,
  left: 2.0,
  right: 2.0,
  // child: _buildDot(),
  child: _buildDottedIndicator(),
);
  }

  Row _buildDottedIndicator(){
  return Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: widget.imageList.map<Widget>((String imageList) => _buildDot(imageList)).toList(),
);
  }

  Container _buildDot(String imageList){
return Container(

  width: 5,
  height: 5,
  margin: EdgeInsets.symmetric(vertical: 10.0,horizontal: 2.0),
  decoration: new BoxDecoration(
      color: _currentIndex == widget.imageList.indexOf(imageList) ? Colors.red : Colors.white,

      borderRadius: new BorderRadius.circular(2.5),
      boxShadow: [
        new BoxShadow(
            color: Colors.red,
            blurRadius: 10.0,
            spreadRadius: 0.0,
            offset: const Offset(0.0, 1.0))
      ]),

);
  }


  PhotoViewGallery _buildPhotoViewGallery(){
  return PhotoViewGallery.builder(
  itemCount: widget.imageList.length,
  builder: (BuildContext context,int index){
    return PhotoViewGalleryPageOptions(
      imageProvider: NetworkImage(widget.imageList[index]),
      minScale: PhotoViewComputedScale.contained * 0.8,
      maxScale: PhotoViewComputedScale.covered * 1.8,
    );
  },
  scrollPhysics: const BouncingScrollPhysics(),
  pageController: _pageController,
  onPageChanged: (int index){
    setState(() {
      _currentIndex = index;
    });
  },
  scrollDirection: Axis.horizontal,
);
  }



    }

 class Deletebtn extends StatelessWidget{
 final auth = FirebaseAuth.instance;

  @override
 Widget build(BuildContext context ) {
return new Padding(padding: const EdgeInsets.all(10.0),
  child: IconButton(
    icon: Icon(Icons.delete_forever_outlined,
      color: const Color(0xFF227770),
      size: 35,
    ),
    onPressed: () async {
      var val =[];

      var userCollection = FirebaseFirestore.instance.collection("users").doc(auth.currentUser.uid).update({ "images" : FieldValue.arrayRemove(val)}).then((_) {
        print("deleted");
      });
    },
  ),
);
  }


 }

第三页：这是图像在容器内的外观，点击图像时，它会提供全屏图像视图。

class PortfolioGalleryImageWidgetTWO extends StatelessWidget{
final String imageList;
final VoidCallback onImageTap;

const PortfolioGalleryImageWidgetTWO({Key key,@required this.imageList, @required this.onImageTap})
  :super(key: key);

 @override
 Widget build(BuildContext context) {
return Container(
  decoration:BoxDecoration(
    boxShadow:[
      BoxShadow(
        color: Colors.black,
        offset: Offset(2, 2),
        spreadRadius: 2,
        blurRadius: 5,
      ),
    ],
    borderRadius: BorderRadius.all(Radius.circular(10)),

  ),
  child: ClipRRect(
    borderRadius:BorderRadius.all(Radius.circular(10)),
    child: Material(
      color: Colors.transparent,
      child: Ink.image(image: NetworkImage(imageList),
        fit: BoxFit.cover,
        child: InkWell(onTap: onImageTap),
      ),
    ),
  ),
);
  }

} 

Answer 1

先试试这个：

  _getImagesOK() async {
    DocumentSnapshot firebaseDoc = await FirebaseFirestore.instance.collection(
      "users").doc(auth.currentUser.uid).get();
    List<String> imageListTemp =[];
     for(var item in firebaseDoc.data()['images']){
      imageListTemp.add(item); 
     }
   
    setState(() {
      imageList=imageListTemp;
      print(imageList.length);
     print(imageList);
      });
    }