如何在颤动中单击后更改网格视图图像上的图标

Question

我在flutter app中做了一个grid view。但是像下面的图片link，我想在图片上创建一个图标并更改背景颜色点击图片后，

我一直在寻找方法，但我终于有了一个问题。如果你能告诉我，我将由衷地感激。

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

import 'dart:ffi';

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class FavoriteAnalysisPage extends StatefulWidget {
  final FirebaseUser user;
  FavoriteAnalysisPage(this.user);

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

class _FavoriteAnalysisPageState extends State<FavoriteAnalysisPage> {
  List style_List = [];
  var styleCode = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("favorite Analysis Page")),
      body:  _bodyBuilder(),
    );
  }

  Widget _bodyBuilder() {

    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: InkWell(
        // Something here.. 
      ),
     );
  }

  Stream<QuerySnapshot> _commentStream() {
    return Firestore.instance.collection("uploaded_product").snapshots();

  
}

Answer 1

这个有状态的小部件可以工作，但您必须根据需要自定义变量

class MyWidget extends StatefulWidget {
MyWidget({Key key}) : super(key: key);

@override
_MyWidgetState createState() {
return _MyWidgetState();
 }
}

class _MyWidgetState extends State<MyWidget> {
 bool isSelected = false;

 @override
  Widget build(BuildContext context) {

   return InkWell(
    child: Container(
    decoration: BoxDecoration(
        image: DecorationImage(
          image : NetworkImage("https://firebasestorage.googleapis.com/v0/b/instaclone-2-fd9de.appspot.com/o/post%2F12344.png?alt=media&token=89d46c03-83ba-4d30-b716-e9b718c1340b"),
          fit : BoxFit.cover,
        )
    ),
    child: isSelected?Container(
      alignment: Alignment.center,
      color: Colors.black38,
      child:Container(
        height: 120,
        width: 120,
        decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.all(Radius.circular(60))
        ),
        child:Icon(Icons.check,color: Colors.white,size: 60,)
      )
    ):Container(),
  ),
  onTap: (){
   setState(() {
     isSelected = !isSelected;
   });
  },
  );
 }
}

如何在颤动中单击后更改网格视图图像上的图标

how to chage an icon on Grid view Img after Click in flutter

dart

flutter

flutter-layout

flutter-animation