Flutter 일기
참고 : https://dart.dev/guides/language/language-tour#spread-operator

...

오늘 배워볼 것은 ...
말 줄인게 아니라 Spread Operator 라고 한다.
유튜브에서 flutter UI 따라하다가 List.generate 앞에 쓰길래, dart 가이드 페이지에 가보니 설명이 있었다.
collection에 여러가지 값을 넣을 때 사용한다고 한다. List, Set, Map 자료형 안에서 사용 가능하다.

코드 예시로 알아보자

1. Dart Code 예시

DartPad에서 간단한 코드를 돌려보았다.

void main(){
  var list1 = [1, 2, 3];
  var list2 = [0, ...list];
  print(list2);  
}

-> 실행결과 : [0, 1, 2, 3]

list2 에 0, 그리고 list1의 원소들을 몽땅 집어넣는다.

그런데 list1이 null일수도 있는데?

void main(){
  var list1;
  var list2 = [0, ...?list];
  print(list2);  
}

-> 실행결과 : [0]

그럴 땐 ...? 요렇게 써주면 된다. 안써주면 NULL 이라고 에러 남!

2. Flutter Code 예시

flutter 에서는 어떻게 쓰면 될까? 간단한 코드를 만들어 돌려보았다.

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("Test Spread Operator")),
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  List<String> numbers = ["one", "two", "three"];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          ...List.generate(
            numbers.length,
            (index) => Container(
              width: 100,
              height: 100,
              color: Colors.black.withOpacity(0.2),
              child: Text(
                numbers[index],
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

List.generate 앞에다가 ...을 붙여주었고, Row 의 자식기능을 한번에 수행한다. 실행화면은 아래와 같다.

오늘의 일기는 여기까지!