Flutter - Spread Operator 활용

표시된 부분과 같이 버튼이 다수 존재 하는데 이것이 상황에 따라 달라질 경우

예를들면 A라는 사람에게는 2개, B라는 사람에게는 3개가 표시 되어야 할 상황이라면 위젯을 그냥 박아버리면 문제가 될 수 있습니다.

이때 Spread Operator 를 활용 할 수 있습니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  var TextArray = ['Hello', 'World', 'ABCD'];

  void ButtonClick() {
    print('Button Click');
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text('Widget By Collection')),
            body: Column(
              children: [
                ...TextArray.map((str) {
                  return ElevatedButton(
                      onPressed: ButtonClick, child: Text(str));
                }).toList()
              ],
            )));
  }
}

여기서 중요한 부분은 ...TextArray 부터 입니다.

...TextArray.map((str) {
                  return ElevatedButton(
                      onPressed: ButtonClick, child: Text(str));
                }).toList()

... 연산자로 배열을 쪼개 버립니다.

이후 map 함수를 활용하여 개별 객체에 대한 함수를 수행합니다.

ElevatedButton을 만들어서 반환 시키며 버튼 콜백도 달고 버튼에 텍스트도 붙여 줍니다.

 

이렇게 명령어로 쪼개 버려도 모든 것이 다 정상 동작 하는것을 확인 하였습니다.