Нажмите на изображение, чтобы стиль изображения изменился, или изображение должно измениться в трепетании
У меня есть 4 изображения в 2 столбцах, когда я нажимаю на одно изображение, его стиль должен измениться, например, цвет, тень должна измениться или это изображение должно быть заменено другим изображением. После нажатия на это изображение другие изображения должны оставаться такими же. Это должно работать как радиокнопки. Как это сделать? Пожалуйста, помогите мне, спасибо заранее.
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',
),),
),
],
),
),
),
],
),),
],
),
),
);
пожалуйста, предоставьте код. я новичок в флаттере
Из какого класса вы расширяетесь? StatefulWidget или StatelessWidget. Пожалуйста, предоставьте надлежащие данные.
я использую statefulwidget
Ответы 1
Сохраните исходные свойства изображения в переменных. Например, если я хочу установить начальный цвет виджета FlutterLogo на Colors.blue, тогда объявите состояние в классе. Затем оберните изображение виджетом GestureDetector и установите свойство onTap. Теперь вызовите метод setState и измените все переменные (свойства изображения) внутри него.
Ниже приведен пример, где есть один виджет FlutterLogo, где я установил начальный цвет этого виджета как Colors.blue, и когда я нажимаю на него, цвет виджета FlutterLogo меняется на Colors.green. Если я снова нажму на него, и если цвет будет Colors.green, то он изменит цвет на Colors.yellow и так далее. Вы можете сделать то же самое со своим изображением и изменить его размер, видимость и другие свойства.
Существует также переменная imagePath, в которой хранится путь к исходному активу, и когда пользователь нажимает на второй виджет (Image.asset) в Column, значение переменной 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),
)
],
));
}
}
если я нажму на 2-е изображение подряд. первое изображение должно вернуться в предыдущее состояние. как это сделать. как радиокнопка
Я обновил свой ответ. Оберните второе изображение GestureDetector и вызовите setState на onTap, что изменит путь (переменную) первого изображения. Объявите несколько переменных для хранения пути к нескольким изображениям. Вы также можете использовать список.
Какой класс вы расширяете? Вам нужно использовать StatefulWidget.