<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/">Home</a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter">flutter</a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter/inline-if-statement-and-inline-loop/">[Flutter] 위젯안에서 인라인 조건문과 인라인 반복문 사용하기</a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><h2 id="개요">개요</h2>Flutter로 앱을 개발할 때, 종종 조건에 의해 위젯을 표시하거나 반복문을 사용하여 위젯을 표시하는 경우가 발생합니다.이 때, 해당 부분을 함수로 만들거나 별도의 위젯을 만들어 표시할 수도 있지만, 위젯안에서 인라인 조건문(Inline if statement)과 인라인 반복문(Inline for statement)을 사용할 수도 있습니다.이번 블로그 포스트에서는 위젯안에서 인라인 조건문과 인라인 반복문을 사용하여 위젯을 표시하는 방법에 대해서 알아봅니다.<h2 id="인라인-반복문">인라인 반복문</h2>위젯안에서 인라인 반복문을 사용하는 방법을 알아보기 위해, <code>main.dart</code> 파일을 다음과 같이 수정합니다.<div><pre><code>const dataList = [
 {"id": 1, "title": "test 1"},
 {"id": 2, "title": "test 2"},
 {"id": 3, "title": "test 3"},
 {"id": 4, "title": "test 4"},
 {"id": 5, "title": "test 5"},
];

class MyHomePage extends StatelessWidget {
 const MyHomePage({super.key});

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: const Text('Condition and Loop'),
 ),
 body: Column(
 crossAxisAlignment: CrossAxisAlignment.stretch,
 children: [
 const Text('temp widget 1'),
 for (var data in dataList)
 Center(
 child: Text(
 data['title'] as String,
 ),
 ),
 const Text('temp widget 2'),
 ],
 ),
 );
 }
}
</code></pre></div>코드를 좀 더 자세히 살펴보겠습니다.<div><pre><code>const dataList = [
 {"id": 1, "title": "test 1"},
 {"id": 2, "title": "test 2"},
 {"id": 3, "title": "test 3"},
 {"id": 4, "title": "test 4"},
 {"id": 5, "title": "test 5"},
];
...
</code></pre></div>인라인 반복문을 사용하기 위해서 임의로 데이터 리스트를 만들었습니다.<div><pre><code>...
body: Column(
 crossAxisAlignment: CrossAxisAlignment.stretch,
 children: [
 ...,
 for (var data in dataList)
 Center(
 child: Text(
 data['title'] as String,
 ),
 ),
 ...,
 ],
),
...
</code></pre></div>이렇게 만든 데이터 리스트를 <code>Column</code> 위젯의 <code>children</code>안에서 인라인 반복문을 사용하여 <code>Text</code> 위젯을 화면에 표시하도록 하였습니다.<picture><source srcset="/assets/images/category/flutter/2022/inline-if-statement-and-inline-loop/loop-in-column-widget-children.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2022/inline-if-statement-and-inline-loop/loop-in-column-widget-children.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2022/inline-if-statement-and-inline-loop/loop-in-column-widget-children.png" alt="Flutter condition and loop in widget - loop in column widget's children"></picture>이렇게 <code>main.dart</code>를 수정하고 실행해 보면 위와 같이 위젯들이 잘 표시되는 것을 확인할 수 있습니다.<h2 id="인라인-조건문">인라인 조건문</h2>위젯안에서 인라인 조건문을 사용하는 방법을 알아보기 위해, <code>main.dart</code> 파일을 다음과 같이 수정합니다.<div><pre><code>const dataList = [
 {"id": 1, "title": "test 1"},
 {"id": 2, "title": "test 2"},
 {"id": 3, "title": "test 3"},
 {"id": 4, "title": "test 4"},
 {"id": 5, "title": "test 5"},
];

class MyHomePage extends StatelessWidget {
 const MyHomePage({super.key});

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: const Text('Condition and Loop'),
 ),
 body: Column(
 crossAxisAlignment: CrossAxisAlignment.stretch,
 children: [
 const Text('temp widget 1'),
 for (var data in dataList)
 if (data['id'] as int != 2)
 Center(
 child: Text(
 data['title'] as String,
 ),
 ),
 const Text('temp widget 2'),
 ],
 ),
 );
 }
}
</code></pre></div>코드를 좀 더 자세히 살펴보겠습니다.<div><pre><code>...
body: Column(
 crossAxisAlignment: CrossAxisAlignment.stretch,
 children: [
 ...,
 for (var data in dataList)
 if (data['id'] as int != 2)
 Center(
 child: Text(
 data['title'] as String,
 ),
 ),
 ...,
 ],
),
...
</code></pre></div>앞서 반복문에서 사용한 코드에서 인라인 조건문을 추가하여 특정 조건일 때에만, <code>Text</code> 위젯을 <code>Column</code> 위젯의 <code>children</code>안에 표시되도록 하였습니다.<picture><source srcset="/assets/images/category/flutter/2022/inline-if-statement-and-inline-loop/condition-in-column-widget-children.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2022/inline-if-statement-and-inline-loop/condition-in-column-widget-children.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2022/inline-if-statement-and-inline-loop/condition-in-column-widget-children.png" alt="Flutter condition and loop in widget - condition in column widget's children"></picture>이렇게 <code>main.dart</code>를 수정하고 실행해 보면 이전과는 다르게 <code>test 2</code> 문자열이 화면에 표시되지 않는 것을 확인할 수 있습니다.<h2 id="완료">완료</h2>이것으로 위젯안에서 인라인 조건문과 인라인 반복문을 사용하여 위젯을 표시하는 방법에 대해서 알아보았습니다. Flutter로 앱을 개발하다보면 한번쯤은 마주치는 문제이므로, 이 블로그 포스트를 통해 사용법을 익혀두면 좋을거 같습니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

인라인 조건문을 사용하여 위젯을 표시할지 여부를 결정하거나 인라인 반복문을 사용하여 위젯을 표시하는 방법에 대해서 알아봅시다.