[트러블 슈팅] 16. Flutter 변수 선언을 build() 안에서 함

편준민's avatar
Jun 10, 2025
[트러블 슈팅] 16. Flutter 변수 선언을 build() 안에서 함
💡
해당 사진의 자전거 아이콘이 있는 버튼을 클릭 시 사진이 바뀌어야 하지만 계속 바뀌지 않음.
notion image

이유

💡
아래의 코드에서 현재는 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

YunSeolAn