if (textField == true)
Column(
children: tileItmeList ?? [],
// childern 에 Textfield 위젯을 추가로 넣어줘
),
if (textField == false)
Column(
children: tileItmeList ?? [],
),
textField 가 true 라면 column의 children 에 요소를 추가하는 기능을 구현하고 싶었다.
그래서 if () 문을 통해 column 의 위젯을 두개로 만들어 추가한 column 과 비추가한 column 으로 작성했다.
하지만 이것은 너무나도 비효율적이라고 생각하여 다른 방법이 없는지 찾아보았다.
문제
조건문을 통해 case 별로 위젯을 따로따로 만들면 코드가 불분명해지고 효율적이지 않다. 즉 조건을 만족하면 chilren 의 요소를 추가하는 방법을 사용하고 싶었다. ->조건을 만족하면 요소가 추가되는 방법은 없을까?
...연산자를 사용하여 요소를 분리하고 추가하는 방식으로 하면 문제가 해결될 것이라고 생각했다.
Column(
children: [
...tileItmeList ?? [],
if (textField) TextField(),
],
이 코드를 조금 더 자세히 설명해보자면
먼저 Column
위젯은 자식 위젯들을 수직 방향으로 배치할 때 사용합니다. 이 경우에는 Column
위젯의 자식 위젯들을 children
속성에 리스트로 전달하고 있습니다.
children
속성의 리스트 구성을 살펴보면 다음과 같습니다:
...tileItmeList ?? []
: tileItmeList
가 null
이 아니라면 해당 리스트의 아이템을 포함합니다. Spread 연산자 ...
를 사용하면 리스트의 요소들을 원래 리스트의 구조를 유지하며 개별 요소로 확장할 수 있습니다. 만약 tileItmeList
가 null
이라면 빈 리스트 []
로 작동합니다.
if (textField) TextField()
: textField
가 true
인 경우, TextField
위젯을 추가합니다. 만약 textField
가 false
라면 이 조건문은 무시되고 TextField
위젯은 추가되지 않습니다.
결론적으로, 이 Column
위젯은 tileItmeList
의 요소들을 수직 방향으로 배치하며, 만약 textField
변수가 참이라면 TextField
위젯이 추가되어 함께 배치됩니다. 이렇게 구성된 Column
위젯은 동적으로 자식 위젯의 목록을 변경할 수 있게 한다는 장점이 있습니다.
알게된 점
children [
...[List] ,
+(새로운 요소)
]
children [
if(조건문) 위젯
]
Spread operator (... 또는 ...?) : 이러한 연산자를 사용하여 컬렉션의 요소를 전개할 수 있습니다. 만약 컬렉션이 null일 수 있는 경우에는 ...?를 사용합니다.
예시:
List list1 = [1, 2, 3];
List list2 = [4, 5, 6];
List combinedList = [...list1, ...list2]; // 출력 결과: [1, 2, 3, 4, 5, 6]
List list3;
List list4 = [7, 8, 9, ...?list3]; // list3이 null이므로 출력 결과: [7, 8, 9]