해당 사진의 자전거 아이콘이 있는 버튼을 클릭 시 사진이 바뀌어야 하지만 계속 바뀌지 않음.

이유
아래의 코드에서 현재는 build 안에
int selectedIndex = 0;
이 들어가 있다. 이렇게 build 안에 넣을 경우에는 다시 build가 되면서 selectedIndex
가 0으로 초기화 되면서 계속 같은 화면을 보여준 것이다.import 'package:flutter/material.dart';
import 'package:flutter_shoppingcart/component/m_select_button.dart';
class MSelectHeader extends StatefulWidget {
@override
State<MSelectHeader> createState() => _MSelectHeaderState();
}
class _MSelectHeaderState extends State<MSelectHeader> {
@override
Widget build(BuildContext context) {
// 1. 상태
List<String> images = [
'assets/p1.jpeg',
'assets/p2.jpeg',
'assets/p3.jpeg',
'assets/p4.jpeg',
];
int selectedIndex = 0;
// 2. 행위
void onClick(int index) {
selectedIndex = index;
print("선택한 번호: ${selectedIndex}");
print("선택한 번호: ${images[selectedIndex]}.");
setState(() {});
}
return Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: AspectRatio(
aspectRatio: 5 / 3,
child: Image.asset("${images[selectedIndex]}", fit: BoxFit.cover),
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
MSelectorButton(() => onClick(0)),
MSelectorButton(() => onClick(1)),
MSelectorButton(() => onClick(2)),
MSelectorButton(() => onClick(3)),
],
),
),
],
),
);
}
}
코드 수정
빌드 밖에 변수를 선언하여 build가 될때 초기화를 하지 않고, 처음 build될때만 0으로 세팅이 될 수 있게 변경한다.변수를 build 밖에 놓게 되면 버튼을 눌렀을 때 selectedIndex 가 바뀌어서 사진이 제대로 바뀐다.
import 'package:flutter/material.dart';
import 'package:flutter_shoppingcart/component/m_select_button.dart';
class MSelectHeader extends StatefulWidget {
@override
State<MSelectHeader> createState() => _MSelectHeaderState();
}
class _MSelectHeaderState extends State<MSelectHeader> {
// 1. 상태
List<String> images = [
'assets/p1.jpeg',
'assets/p2.jpeg',
'assets/p3.jpeg',
'assets/p4.jpeg',
];
int selectedIndex = 0;
@override
Widget build(BuildContext context) {
// 2. 행위
void onClick(int index) {
selectedIndex = index;
print("선택한 번호: ${selectedIndex}");
print("선택한 번호: ${images[selectedIndex]}.");
setState(() {});
}
return Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: AspectRatio(
aspectRatio: 5 / 3,
child: Image.asset("${images[selectedIndex]}", fit: BoxFit.cover),
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
MSelectorButton(() => onClick(0)),
MSelectorButton(() => onClick(1)),
MSelectorButton(() => onClick(2)),
MSelectorButton(() => onClick(3)),
],
),
),
],
),
);
}
}
Share article