인프런 커뮤니티 질문&답변
작성한 질문수
children 안의 if 문에서 { } 못쓰는 이유?
작성
·
11
0
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if(show) GestureDetector(
onTap: () {
setState(() {
color = color == Colors.blue ? Colors.red : Colors.blue;
});
},
child: CodeFactoryWidget(
color: color
),
),
SizedBox(height: 32.0,),
ElevatedButton(
onPressed: () {
//print('Clikced!');
setState(() {
show = show == true ? false : true;
});
},
child: Text('클릭해서 보이기/ 안보이기'))
],
이렇게 인데,
if(show) 의 코드를 좀더 편하게 보기 위해 GestureDectector() 를 { } 로 묶어주려고하니까 오류가 뜨네요. 왜그런가요?
if() {} 이렇게 할 수 있지 않나요?
그리고 if() {} 안에 print() 넣으려고 하니 print 도 에러가 뜨네여
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if(show) { // if문 {} 로 묶어줌
GestureDetector(
onTap: () {
setState(() {
color = color == Colors.blue ? Colors.red : Colors.blue;
});
},
child: CodeFactoryWidget(
color: color
),
),
}
else print("Error"); // print 도 에러 뜸
SizedBox(height: 32.0,),
ElevatedButton(
onPressed: () {
//print('Clikced!');
setState(() {
show = show == true ? false : true;
});
},
child: Text('클릭해서 보이기/ 안보이기'))
],
),코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다!
[코드팩토리 디스코드]
https://bit.ly/3HzRzUM
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. dlengus14님께서 질문하신 내용에 대한 답변을 드리겠습니다.
Flutter의 children 속성에서 사용하는 경우, if-else 문을 {}으로 둘러쌀 수 없습니다. 이는 Flutter의 위젯 빌드 체계와 Dart 언어의 예외적인 문법 때문입니다. if 문은 Dart에서 하나의 표현식을 반환할 것이기 때문에, children 리스트에 포함될 위젯 자체로 사용해야 합니다. 따라서 중괄호 {}를 사용하는 것은 위젯이 아닌 문장의 집합을 의미하게 되어 문법 오류가 발생하는 것입니다.
질문에서 의도하신 바를 달성하기 위해서는 if 문 뒤에 단일 위젯을 두거나 삼항 연산자 ?:를 활용하여 조건에 따라 다른 위젯을 반환하는 방식이 필요합니다.
여기 Flutter에서 조건부 위젯을 사용하는 일반적인 방법에 대한 간단한 예시가 있습니다:
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (show)
GestureDetector(
onTap: () {
setState(() {
color = color == Colors.blue ? Colors.red : Colors.blue;
});
},
child: CodeFactoryWidget(
color: color
),
)
else
Text('Error'), // print 대신 다른 위젯을 사용합니다.
SizedBox(height: 32.0,),
ElevatedButton(
onPressed: () {
setState(() {
show = !show;
});
},
child: Text('클릭해서 보이기/ 안보이기'))
],
),
print()는 콘솔에 디버그 메시지를 출력하는 기능이므로, Flutter 위젯 트리에서는 위젯으로 사용할 수 없습니다. 대신 Text 위젯이나 메시지 박스 같은 위젯을 사용해야 합니다.
관련된 질문이 Row 위젯의 children의 [위젯1, 위젯2…] 안에서 if문에서 다뤄진 적이 있으니 참고하시면 좋겠습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.