[Flutter] 위젯안에서 인라인 조건문과 인라인 반복문 사용하기

개요

Flutter로 앱을 개발할 때, 종종 조건에 의해 위젯을 표시하거나 반복문을 사용하여 위젯을 표시하는 경우가 발생합니다.

이 때, 해당 부분을 함수로 만들거나 별도의 위젯을 만들어 표시할 수도 있지만, 위젯안에서 인라인 조건문(Inline if statement)과 인라인 반복문(Inline for statement)을 사용할 수도 있습니다.

이번 블로그 포스트에서는 위젯안에서 인라인 조건문과 인라인 반복문을 사용하여 위젯을 표시하는 방법에 대해서 알아봅니다.

인라인 반복문

위젯안에서 인라인 반복문을 사용하는 방법을 알아보기 위해, main.dart 파일을 다음과 같이 수정합니다.

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'),
        ],
      ),
    );
  }
}

코드를 좀 더 자세히 살펴보겠습니다.

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"},
];
...

인라인 반복문을 사용하기 위해서 임의로 데이터 리스트를 만들었습니다.

...
body: Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    ...,
    for (var data in dataList)
      Center(
        child: Text(
          data['title'] as String,
        ),
      ),
    ...,
  ],
),
...

이렇게 만든 데이터 리스트를 Column 위젯의 children안에서 인라인 반복문을 사용하여 Text 위젯을 화면에 표시하도록 하였습니다.

Flutter conditaion and loop in widget - loop in column widget's children

이렇게 main.dart를 수정하고 실행해 보면 위와 같이 위젯들이 잘 표시되는 것을 확인할 수 있습니다.

인라인 조건문

위젯안에서 인라인 조건문을 사용하는 방법을 알아보기 위해, main.dart 파일을 다음과 같이 수정합니다.

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'),
        ],
      ),
    );
  }
}

코드를 좀 더 자세히 살펴보겠습니다.

...
body: Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    ...,
    for (var data in dataList)
      if (data['id'] as int != 2)
        Center(
          child: Text(
            data['title'] as String,
          ),
        ),
    ...,
  ],
),
...