在抖动中单击图像后如何在带有墨水池的图像上创建图标

如何解决在抖动中单击图像后如何在带有墨水池的图像上创建图标

我在flutter应用程序中进行了网格查看。但是，就像下面的图片链接一样，我想在图片上创建一个图标并更改背景颜色。点击图片后，

我一直在寻找方法，但是我终于有了一个问题。如果您让我知道，我将衷心感谢。

请在下面输入img链接

https://firebasestorage.googleapis.com/v0/b/instaclone-2-fd9de.appspot.com/o/post%2F12344.png?alt=media&token=89d46c03-83ba-4d30-b716-e9b718c1340b

 Widget _bodyBuilder() {
//  TODO : 그 예시를 어떻해 stream View로 보여줄것인가
return StreamBuilder <QuerySnapshot>(
  stream: _commentStream(),builder: (BuildContext context,AsyncSnapshot snapshot){
    if(!snapshot.hasData){
      return Center(child:  CircularProgressIndicator());
    }
    var items =  snapshot.data?.documents ??[];
    var fF = items.where((doc)=> doc['style'] == "오피스룩").toList();
    var sF = items.where((doc)=> doc['style'] == "로맨틱").toList();
    var tF = items.where((doc)=> doc['style'] == "캐주").toList();
    fF.addAll(sF);
    fF.addAll(tF);
    fF.shuffle();

    return GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,childAspectRatio: 0.6,mainAxisSpacing: 2.0,crossAxisSpacing: 2.0),itemCount: fF.length,itemBuilder: (BuildContext context,int index) {
          return _buildListItem(context,fF[index]);
        });
  },);

}

      Widget _buildListItem(context,document) {
    return Ink.image(
     image : NetworkImage(document['thumbnail_img']),fit : BoxFit.cover,child: new InkWell(
       //I think we need to get something in here....
        onTap: (){},),);
  }

解决方法

您应该创建具有isSelected值的图像列表，当用户单击它们时，设置具有imageURL和isSelected变量的旧值的真/假基数。首先，您应该将值存储在“图像列表” obj中。来自Firebase / API的内容，然后进行以下操作。我创建了一个演示并将其发布在此处。请参考。

示例代码

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  List<ImageData> imageList;

  @override
  void initState() {
    super.initState();
    imageList = ImageData.getImage();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            childAspectRatio: 0.5,crossAxisCount: 5,crossAxisSpacing: 2.0,mainAxisSpacing: 2.0),itemCount: imageList.length,itemBuilder: (builder,index) {
          return InkWell(
              onTap: () {
                setState(() {
                  imageList[index].isSelected = !imageList[index].isSelected;
                });
              },child: Stack(
                children: [
                  _getImage(imageList[index].imageURL),Opacity(
                    opacity: imageList[index].isSelected ? 1 : 0,child: Stack(
                      children: [
                        Container(
                          width: double.infinity,height: double.infinity,color: Colors.black38,),Center(
                          child: CircleAvatar(
                            backgroundColor: Colors.greenAccent,child: Icon(
                              Icons.check,color: Colors.white,)
                      ],)
                ],));
        },);
  }

  _getImage(url) => Image.network(
        url,height: 500,fit: BoxFit.fitHeight,);

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

class ImageData {
  String imageURL;
  bool isSelected;
  int id;

  ImageData(this.imageURL,this.isSelected,this.id);

  static List<ImageData> getImage() {
    return [
      ImageData('https://picsum.photos/200',false,1),ImageData('https://picsum.photos/100',2),ImageData('https://picsum.photos/300',3),ImageData('https://picsum.photos/400',4),ImageData('https://picsum.photos/500',5),ImageData('https://picsum.photos/600',6),ImageData('https://picsum.photos/700',7),ImageData('https://picsum.photos/800',8),ImageData('https://picsum.photos/900',9),];
  }
}

输出