[TIL] 20241115_위젯 분리하기

ds-k.dev·2024년 11월 15일
0

TIL

목록 보기
20/26

반복되는 위젯을 List.generate로 사용하기

 final List<Widget> seatList = List.generate(20, (idx) => seatRow(idx, false));

  Widget seatRow(int idx, bool isSelected) {
    Widget seat = GestureDetector(
      onTap: () {
        !isSelected;
      },
      child: Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
            color: isSelected ? Colors.purple : Colors.grey[300]!),
      ),
    );
    return Row(
      children: [seat, seat, Text((idx + 1).toString()), seat, seat],
    );
  }

이런식으로 seatList를 Row가 여러개 있는 배열로 만들어 정리하고자 했는데,

The instance member 'seatRow' can't be accessed in an initializer.
Try replacing the reference to the instance member with a different expression
이니셜라이저에서 인스턴스 멤버 'seatRow'에 액세스할 수 없습니다.
인스턴스 멤버에 대한 참조를 다른 표현식으로 바꾸어 보세요.

라는 에러 메세지를 받았다.

튜터님의 도움으로 얻은 답변은,
같은 클래스 내의 멤버가 서로를 참조할 경우 발생할 수 있는 오류로 이해했다.

다른 파일에서 생성 후 작성

import 'package:flutter/material.dart';

Widget SeatRow(int idx, bool isSelected) {
  Widget seat = GestureDetector(
    onTap: () {
      !isSelected;
    },
    child: Container(
      width: 50,
      height: 50,
      decoration:
          BoxDecoration(color: isSelected ? Colors.purple : Colors.grey[300]!),
    ),
  );
  return Row(
    children: [seat, seat, Text((idx + 1).toString()), seat, seat],
  );
}

이렇게 별도의 파일을 작성하고,

final List<Widget> seatList = List.generate(20, (idx) => SeatRow(idx, false));

불러오니 문제가 해결되었다.

0개의 댓글