[flutter] 플러터 Table 위젯에서 특정 셀에 백그라운드 이미지 설정하기

15 Dec 2023

flutter

플러터(Table)[https://api.flutter.dev/flutter/widgets/Table-class.html]은 행과 열로 이루어진 2차원 배열 모양의 위젯입니다. 각 셀마다 다양한 형식의 위젯을 나타낼 수 있으며, 원하는 셀에 백그라운드 이미지를 설정하는 방법에 대해 알아보겠습니다.

1. BoxDecoration 사용

특정 셀에 백그라운드 이미지를 설정하려면 해당 셀의 내용을 Container 위젯으로 감싸고, Container의 decoration 속성에 BoxDecoration을 사용하여 이미지를 설정합니다.

Table(
  children: [
    TableRow(
      children: [
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/background_image.png'),
              fit: BoxFit.cover,
            ),
          ),
          child: // 셀에 들어갈 내용 위젯,
        ),
      ],
    ),
  ],
)

이 경우, background_image.png는 앱의 이미지 리소스에 위치한 이미지 파일입니다.

2. Ink 속성 사용

또 다른 방법은 Ink 위젯을 사용하여 감싸는 것입니다. Ink 위젯은 터치 효과가 있는 위젯을 감싸는 데 사용됩니다.

Table(
  children: [
    TableRow(
      children: [
        Ink(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/background_image.png'),
              fit: BoxFit.cover,
            ),
          ),
          child: // 셀에 들어갈 내용 위젯,
        ),
      ],
    ),
  ],
)

1. BoxDecoration 사용

2. Ink 속성 사용

참고