[Flutter] Column의 chidren의 배열항목이 많을 때

 

Flutter에서 Column 위젯의 자식에 많은 위젯들이 있으면 가독성이 떨어진다. 그럴경우 많은 Flutter 개발자들은 위젯배열의 변수를 만들거나 함수를 만들어서 children에 넘긴다. 

예로 다음과 같은 과정을 거친다. 

 

1. _buildChildWidget() 함수를 만들어 위젯 배열(List<Widget>)을 넘긴다.

2. Column의 children의 배열에 ... 연산자(분해할당)로 아이템을 분해해서 넣는다.

 

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('Flutter Column Example')),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  // 여러 개의 위젯을 생성하는 함수
  List<Widget> _buildChildWidget() {
    return List.generate(
      5,
      (index) => Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          height: 50,
          color: Colors.blueAccent,
          alignment: Alignment.center,
          child: Text(
            'Item ${index + 1}',
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('위젯 리스트 시작', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
          ..._buildChildWidget(), // 리스트를 펼쳐서 추가
          Text('위젯 리스트 끝', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }
}

 

IDX 결과화면 링크