[Flutter] 반복되는 Widget for문으로 나타내는 방법

Flutter에서 여러 개의 위젯을 동적으로 생성할 때 for 문을 활용하면 코드의 반복을 줄이고 가독성을 높일 수 있습니다. 이 글에서는 for 문을 사용하여 위젯을 효율적으로 생성하는 방법을 설명하겠습니다.

 

 

1. ListView에서 for문 사용하기

Flutter에서 ListView를 사용할 때, children 속성에 for 문을 직접 사용할 수 있습니다.

예제 코드

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('For문을 이용한 Widget 생성')),
        body: ListView(
          children: [
            for (int i = 0; i < 10; i++)
              ListTile(
                leading: Icon(Icons.star),
                title: Text('항목 $i'),
                subtitle: Text('이것은 $i 번째 항목입니다.'),
              ),
          ],
        ),
      ),
    );
  }
}

실행화면

설명

• ListView의 children 속성에 for 문을 사용하여 ListTile 위젯을 동적으로 생성합니다.
• i 값을 활용하여 각 아이템의 텍스트를 다르게 설정할 수 있습니다.

 

 

2. List.generate()를 활용한 위젯 생성

Flutter에서 리스트를 생성할 때 List.generate() 메서드를 사용하면 더 간결한 코드를 작성할 수 있습니다.

예제 코드

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('For문을 이용한 Widget 생성')),
        body: ListView(
          children: List.generate(10, (index) => ListTile(
              leading: Icon(Icons.check_circle),
              title: Text('항목 $index'),
          )),
        )
      ),
    );
  }
}

실행화면

설명

• List.generate(10, (index) => ListTile(...))를 사용하여 10개의 ListTile을 자동으로 생성합니다.
• for 문보다 간결하게 작성할 수 있어 가독성이 좋아집니다.

 

 

3. GridView에서 for문 사용하기

GridView에서도 같은 방식으로 사용할 수 있습니다.

예제 코드

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('For문을 이용한 Widget 생성')),
        body: GridView.count(
          crossAxisCount: 5,
          children: [
            for (int i = 0; i < 15; i++)
              Container(
                margin: EdgeInsets.all(4.0),
                color: Colors.tealAccent,
                height: 100,
                child: Center(child: Text('아이템 $i')),
              ),
          ],
        )
      ),
    );
  }
}

실행화면

설명

• GridView.count()를 사용하여 5개의 열을 가진 그리드를 생성합니다.
• for 문을 활용하여 15개의 Container를 추가합니다.