Dart 单击图像样式应更改或图像应在颤振中更改的图像

我有2列4幅图像，当我点击一幅图像时，它的样式应该改变，比如颜色，阴影应该改变，或者该图像应该被另一幅图像替换。单击该图像后，其他图像应保持不变。它应该像单选按钮一样工作。怎么做？请帮助我，提前谢谢

final img_rowi= Center(child:
new Container(
  color:   Colors.transparent,

  padding: const EdgeInsets.all(5.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Padding(padding: const EdgeInsets.all(3.0),child: Stack(

        alignment: Alignment.center,
        children: <Widget>[
          svgIcon,new GestureDetector(
            onTap: (){
              setState(() {
                pressed = !pressed;
              });

            },
            child:
          Container(

            child: new Column(
              children: <Widget>[
                new Container(

                  child: new Image.asset(
                    'images/sheep_female.png',
                    height: 50.0,
                    fit: BoxFit.cover,
                  ),
                ),
                new Container(
                  child: new Text('Sheep',style: pressed
                      ? TextStyle(color: const Color(0xFFCDCDCD),fontFamily: 'Montserrat',
                   )
                      : TextStyle(color:Colors.black,fontFamily: 'Montserrat',
                   ),),
                ),
              ],
            ),
            ),
          ),
        ],
      ),),

      Padding(padding: const EdgeInsets.all(3.0),child:
      Stack(
        alignment: Alignment.center,
        children: <Widget>[
          svgIcon,new GestureDetector(
            onTap: (){
              setState(() {
                pressed1 = !pressed1;
              });

            },
            child:
          Container(
            child: new Column(
              children: <Widget>[
                new Container(
                  child: new Image.asset(
                    'images/biily_doe.png',
                    height: 50.0,
                    fit: BoxFit.cover,
                  ),
                ),
                new Container(
                  child: new Text('Billy Doe',style: pressed1
                      ? TextStyle(color: const Color(0xFFCDCDCD),fontFamily: 'Montserrat',
                  )
                      : TextStyle(color:Colors.black,fontFamily: 'Montserrat',
                  ),),
                ),
              ],
            ),
            ),
          ),
        ],
      ),),

    ],
  ),
),

);

final img_rowi=中心（子：
新容器(
颜色：颜色。透明，
填充：常数边集全部（5.0），
孩子：排(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
填充（填充：常量EdgeInsets.all（3.0），子级：堆栈(
对齐：对齐.center，
儿童：[
svgIcon，新的手势检测器(
onTap:（）{
设置状态（）{
按下=！按下；
});
},
儿童：
容器(
子：新列(
儿童：[
新容器(
子：新建Image.asset(
“images/sheep_female.png”，
身高：50.0，
适合：BoxFit.cover，
),
),
新容器(
子项：新文本（'Sheep'，样式：按
？文本样式（颜色：常量颜色（0xFFCDCDCD），fontFamily:“蒙特塞拉特”，
)
：TextStyle（颜色：Colors.black，fontFamily:“蒙特塞拉特”，
),),
),
],
),
),
),
],
),),
填充（填充：常量边集。全部（3.0），子项：
堆叠(
对齐：对齐.center，
儿童：[
svgIcon，新的手势检测器(
onTap:（）{
设置状态（）{
按1=！按1；
});
},
儿童：
容器(
子：新列(
儿童：[
新容器(
子：新建Image.asset(
“images/biily_doe.png”，
身高：50.0，
适合：BoxFit.cover，
),
),
新容器(
子项：新文本（'Billy Doe'，样式：按1
？文本样式（颜色：常量颜色（0xFFCDCDCD），fontFamily:“蒙特塞拉特”，
)
：TextStyle（颜色：Colors.black，fontFamily:“蒙特塞拉特”，
),),
),
],
),
),
),
],
),),
],
),
),
);

将图像的初始属性存储在变量中。例如，如果我想将

logo

小部件的初始颜色设置为

Colors.blue

，然后在类中声明一个状态。然后用

GestureDetector

小部件包装图像，并设置

onTap

属性。现在调用

setState

方法并更改其中的所有变量（图像属性）

下面是一个示例，其中有一个

flatterlogo

小部件，我将该小部件的初始颜色设置为

Colors.blue

，当我点击它时，

flatterlogo

小部件的颜色变为

Colors.green

。如果我再次点击它，如果颜色是

Colors.green

，则它会将颜色更改为

Colors.yellow

，依此类推。您可以对图像执行类似的操作，并更改其大小、可见性和其他属性

还有一个

imagePath

变量，它存储初始资产的路径，当用户点击

列
中的第二个小部件（
Image.asset
）时，变量
imagePath
的值被更改，并且再次调用
build
方法并替换图像

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool visibility;
  Color colorOfFlutterLogo = Colors.blue;
  String imagePath1 = "assets/initial-path-of-image-1";
  String imagePath2 = "assets/initial-path-of-image-2";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black,
        ),
        body: Column(
          children: <Widget>[
            GestureDetector(
              onTap: () => setState(() {
                    if (colorOfFlutterLogo == Colors.blue)
                      colorOfFlutterLogo = Colors.green;
                    else if (colorOfFlutterLogo == Colors.green)
                      colorOfFlutterLogo = Colors.yellow;
                    else if (colorOfFlutterLogo == Colors.yellow)
                      colorOfFlutterLogo = Colors.blue;
                  }),
              child: FlutterLogo(
                size: double.infinity,
                colors: colorOfFlutterLogo,
              ),
            ),

            // Image 1
            GestureDetector(
              onTap: () => setState(() {
                    imagePath2 = "assets/new-path-for-image-2";
                  }),
              child: Image.asset(imagePath1),
            ),

            // Image 2
            GestureDetector(
              onTap: () => setState(() {
                    imagePath1 = "assets/new-path-for-image-1";
                  }),
              child: Image.asset(imagePath2),
            )
          ],
        ));
  }
}


导入“包装：颤振/材料.省道”；
void main（）=>runApp（MaterialApp（home:MyApp（））；
类MyApp扩展了StatefulWidget{
@凌驾
_MyAppState createState（）=>\u MyAppState（）；
}
类MyAppState扩展了状态{
布尔能见度；
Color COLOROFF LUTTERLOGO=Colors.blue；
字符串imagePath1=“资产/initial-path-of-image-1”；
字符串imagePath2=“assets/initial-path-of-image-2”；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
背景颜色：Colors.black，
),
正文：专栏(
儿童：[
手势检测器(
onTap:（）=>设置状态（）{
如果（ColorOfLutterLogo==Colors.blue）
ColorOfLutterLogo=Colors.green；
else if（ColorOfLutterLogo==Colors.green）
ColorOfLutterLogo=Colors.yellow；
else if（ColorOfLutterLogo==Colors.yellow）
ColorOfLutterLogo=Colors.blue；
}),
孩子：我的标志(
大小：双无限，
颜色：ColorOfLutterLogo，
),
),
//图1
手势检测器(
onTap:（）=>设置状态（）{
imagePath2=“资产/new-path-for-image-2”；
}),
子项：Image.asset（imagePath1），
),
//图2
手势检测器(
onTap:（）=>设置状态（）{
imagePath1=“资产/new-path-for-image-1”；
}),
子项：Image.asset（imagePath2），
)
],
));
}
}
您要扩展哪个类？您需要使用StatefulWidget。请提供代码。我是新来的，你是从哪个班级来的？StatefulWidget或无状态Widget。请提供适当的详细信息。如果我连续点击第二张图片，我将使用StatefulWidget。第一个图像应该返回到以前的状态。如何做到这一点。我已经更新了我的答案。用
gesturedector
包裹第二张图像，然后在
o上调用
setState