[Flutter]... (스프레드 연산자)

'...'는 컬렉션을 펼쳐주는 연산자 이다.
리스트나 맵을 펼쳐서 다른 리스트나 맵을 포함시킬때 사용한다.

다른 컬렉션 안에 컬렉션을 삽입할때 사용

var item = [1, 2, 3];
var item1 = [0, ...list];    // 0, 1, 2, 3 

nullable list

var item = [1, 2, 2, 3, 3, 4, 5];
var new = {..item, 6, 7};    //  1, 2, 3, 4, 5, 6, 7

nullable list

var item;
var item1 = [0, ...?test];    // 0

Stack(
      children: [
        Positioned(
            top: 308.h,
            left: 20.w,
            child: Text('이메일(아이디)', style: White(14.sp, FontWeight.w600))),
        Positioned(
          top: 333.h,
          left: 12.w,
          child: GlassContainer(
            width: 320.w,
            height: 40.h,
            margin: EdgeInsets.symmetric(horizontal: 8),
            color: Color(0x3300287C),
            borderGradient: LinearGradient(
              colors: [
                Colors.white.withOpacity(0.5),
                Colors.white.withOpacity(0.2),
                Colors.white.withOpacity(0.2),
                Colors.white.withOpacity(0.2),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              stops: [0.10, 0.60, 0.40, 0.0],
            ),
            blur: 12,
            borderRadius: BorderRadius.circular(10),
            borderWidth: 1.0,
            elevation: 0,
            child: Align(
              alignment: Alignment.center,
              child: Text(
                'example@example.com,',
                style: White(14.sp, FontWeight.w600),
              ),
            ),
          ),
        ),
        Positioned(
            top: 393.h,
            left: 20.w,
            child: Text('이름', style: White(14.sp, FontWeight.w600))),
        Positioned(
          top: 418.h,
          left: 12.w,
          child: GlassContainer(
            width: 320.w,
            height: 40.h,
            margin: EdgeInsets.symmetric(horizontal: 8),
            color: Color(0x3300287C),
            borderGradient: LinearGradient(
              colors: [
                Colors.white.withOpacity(0.5),
                Colors.white.withOpacity(0.2),
                Colors.white.withOpacity(0.2),
                Colors.white.withOpacity(0.2),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              stops: [0.10, 0.60, 0.40, 0.0],
            ),
            blur: 12,
            borderRadius: BorderRadius.circular(10),
            borderWidth: 1.0,
            elevation: 0,
            child: Align(
              alignment: Alignment.center,
              child: Text(
                '김이름',
                style: White(14.sp, FontWeight.w600),
              ),
            ),
          ),
        ),
        Positioned(
            top: 478.h,
            left: 20.w,
            child: Text('성별', style: White(14.sp, FontWeight.w600))),
        Positioned(
          top: 503.h,
          left: 12.w,
          child: GlassContainer(
            width: 320.w,
            height: 40.h,
            margin: EdgeInsets.symmetric(horizontal: 8),
            color: Color(0x3300287C),
            borderGradient: LinearGradient(
              colors: [
                Colors.white.withOpacity(0.5),
                Colors.white.withOpacity(0.2),
                Colors.white.withOpacity(0.2),
                Colors.white.withOpacity(0.2),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              stops: [0.10, 0.60, 0.40, 0.0],
            ),
            blur: 12,
            borderRadius: BorderRadius.circular(10),
            borderWidth: 1.0,
            elevation: 0,
            child: Align(
              alignment: Alignment.center,
              child: Text(
                '남성',
                style: White(14.sp, FontWeight.w600),
              ),
            ),
          ),
        ),
        Positioned(
            top: 563.h,
            left: 20.w,
            child: Text('생년월일', style: White(14.sp, FontWeight.w600))),
        Positioned(
          top: 588.h,
          left: 12.w,
          child: GlassContainer(
            width: 320.w,
            height: 40.h,
            margin: EdgeInsets.symmetric(horizontal: 8),
            color: Color(0x3300287C),
            borderGradient: LinearGradient(
              colors: [
                Colors.white.withOpacity(0.5),
                Colors.white.withOpacity(0.2),
                Colors.white.withOpacity(0.2),
                Colors.white.withOpacity(0.2),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              stops: [0.10, 0.60, 0.40, 0.0],
            ),
            blur: 12,
            borderRadius: BorderRadius.circular(10),
            borderWidth: 1.0,
            elevation: 0,
            child: Align(
              alignment: Alignment.center,
              child: Text(
                '1996.01.01',
                style: White(14.sp, FontWeight.w600),
              ),
            ),
          ),
        ),
        Positioned(
            top: 648.h,
            left: 20.w,
            child: Text('가입일', style: White(14.sp, FontWeight.w600))),
        Positioned(
          top: 673.h,
          left: 12.w,
          child: GlassContainer(
            width: 320.w,
            height: 40.h,
            margin: EdgeInsets.symmetric(horizontal: 8),
            color: Color(0x3300287C),
            borderGradient: LinearGradient(
              colors: [
                Colors.white.withOpacity(0.5),
                Colors.white.withOpacity(0.2),
                Colors.white.withOpacity(0.2),
                Colors.white.withOpacity(0.2),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              stops: [0.10, 0.60, 0.40, 0.0],
            ),
            blur: 12,
            borderRadius: BorderRadius.circular(10),
            borderWidth: 1.0,
            elevation: 0,
            child: Align(
              alignment: Alignment.center,
              child: Text(
                '2024.04.01',
                style: White(14.sp, FontWeight.w600),
              ),
            ),
          ),
        )
      ],
    );

반복되는 컨테이너와 텍스트 때문에 쓸데없이 코드만 길어져서
가독성이 매우 떨어진다.

class MyInfomation extends StatefulWidget {
  const MyInfomation({super.key});

  @override
  State<MyInfomation> createState() => _MyInfomationState();
}

class _MyInfomationState extends State<MyInfomation> {
  Map<String, dynamic> list = {
    '이메일(아이디)': 'example@example.com',
    '이름': '김이름',
    '성별': '남성',
    '생년월일': '1996.01.01',
    '가입일': '2023.04.01',
  };

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: 296.h,
          left: 8.w,
          child: CustomContainer2(
            width: 344.w,
            height: 428.h,
          ),
        ),
        ...list.entries.map((entry) {
          int index = list.keys.toList().indexOf(entry.key);
          return Positioned(
            top: 308.h + (index * 84.h),
            left: 20.w,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  entry.key,
                  style: White(14.sp, FontWeight.w600),
                ),
                SizedBox(height: 8.h),
                GlassContainer(
                  width: 320.w,
                  height: 40.h,
                  color: Color(0x3300287C),
                  borderGradient: LinearGradient(
                    colors: [
                      Colors.white.withOpacity(0.5),
                      Colors.white.withOpacity(0.2),
                      Colors.white.withOpacity(0.2),
                      Colors.white.withOpacity(0.2),
                    ],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    stops: [0.10, 0.60, 0.40, 0.0],
                  ),
                  blur: 12,
                  borderRadius: BorderRadius.circular(10.r),
                  borderWidth: 1.0,
                  elevation: 0,
                  child: Center(
                    child: Text(
                      entry.value,
                      style: White(14.sp, FontWeight.w600),
                    ),
                  ),
                ),
              ],
            ),
          );
        }).toList(),
      ],
    );
  }
}

'list.entries.map((entry) { ... }):'

• list.entries는 맵의 키-값 쌍의 목록을 제공하는데 각 키-값 쌍은 MapEntry타입이다.

• 'map'함수는 각 MapEntry를 순회하며, 이를 입력으로 받아 새로운 리스트를 생성한다.

int index = list.keys.toList().indexOf(entry.key);

• 각 'entry'는 MapEntry타입으로, 'entry.key' 는 현재 항목의 키이다.
• 'list.keys' 는 맵의 모든 키를 제공하며, 이를 'toList()' 메서드 리스트로 변환한다.
• indexOf(entry.key)는 해당 키가 리스트에서 몇 번째에 위치하는지 인덱스를 반환합니다. 이를 통해 현재 항목의 인덱스를 계산한다.