[flutter] Column의 children에 배열추가하기

children을 가지는 Widget들을 사용하다보면 다른 곳에서 선언된 Widget의 리스트(배열)을 children : [ ... ] 안에 사용해야 할 경우가 빈번하게 발생한다. 그럴 경우, Dart에서는 3가지 방법을 사용할 수 있다. 

 

1. ...연산자와 toList() 메소드를 사용하는 방법
2. for()문을 사용하는 방법
3. for() ...{} 문을 사용하는 방법

1의 경우, []안에 List의 항목을 추가하는 기능을 한다.

2.의 경우는 리스트의 항목을 가져오거나 특정범위를 지정하여 항목을 추가할 수 있다.

 

3.의 경우는 2와 동일하지만 간단한 비교문을 처리할 경우 유용하게 사용할 수 있다. 

 

 

다음은 전체소스이다. 

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.grey,
      ),
      home: const MyHomePage(title: 'children 요소에 배열추가하기'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var sty1 = TextStyle(fontSize: 30);
    var sty2 = TextStyle(fontSize: 20, color: Colors.cyanAccent);
    var sty3 = TextStyle(fontSize: 20, color: Colors.deepOrangeAccent);

    var lstText = [Text("1"), Text("2"), Text("3"), Text("4")];

    return Scaffold(
      body: SingleChildScrollView(
        child: Center(
          child: Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  '...리스트.toList()',
                  style: sty1,
                ),
                SizedBox(
                  height: 10,
                ),

                // 1. 단순 배열을 처리할 때
                ...lstText.toList(),
                Text(
                  'for() ',
                  style: sty1,
                ),
                SizedBox(
                  height: 10,
                ),

                // 2. 배열의 아이템을 하나씩 추가할 때
                for (var i = 0; i < 5; i++)
                  Text(
                    "for() ${i}",
                    style: sty2,
                  ),
                Text(
                  'for()...{조건처리가능}',
                  style: sty1,
                ),
                SizedBox(
                  height: 10,
                ),

                // 3. 배열에서 조건문을 처리할 때(제한적임)
                for (var i = 0; i < 10; i++) ...{
                  if (i < 5)
                    Text(
                      "lower 5 .. {${i}}",
                      style: sty3,
                    )
                  else
                    Text(
                      "higher 5 .. {${i}}",
                      style: sty3,
                    )
                }
              ],
            ),
          ),
        ),
      ),
    );
  }
}