Flutter에서는 Row 위젯을 사용하여 다양한 위젯을 가로로 나열할 수 있습니다. 이 중에서 이미지 버튼을 Row 위젯에 추가하여 사용하는 방법에 대해 알아보겠습니다.

1. 이미지 버튼 위젯 불러오기

우선, 프로젝트에 이미지 버튼 위젯을 사용하기 위해 Flutter의 flutter/material.dart 패키지를 import 해야 합니다. 아래의 코드를 import 섹션에 추가하세요.

import 'package:flutter/material.dart';

2. 이미지 버튼 생성하기

이미지 버튼을 생성하기 위해선 IconButton 위젯을 사용합니다. IconButton 위젯은 아이콘과 클릭 가능한 영역을 가지고 있습니다.

아래의 코드는 기본적인 이미지 버튼을 생성하는 방법입니다. 이미지 버튼을 Row 위젯에 추가하려면 children 속성을 사용하여 Row에 위젯을 추가해야 합니다.

Row(
  children: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // 버튼 클릭 시 동작할 코드 작성
      },
    ),
  ],
),

위 코드에서는 IconButton 위젯을 생성하여 아이콘으로 검색 아이콘을 사용하였습니다. 클릭 시 동작할 코드는 onPressed 속성에 작성하면 됩니다.

3. 이미지 버튼 스타일링하기

이미지 버튼의 스타일을 조정하고 싶다면 iconSize, color, splashColor 등의 속성을 사용하여 스타일을 변경할 수 있습니다. 다음은 스타일을 변경한 예시 코드입니다.

Row(
  children: [
    IconButton(
      icon: Icon(Icons.favorite),
      onPressed: () {
        // 버튼 클릭 시 동작할 코드 작성
      },
      iconSize: 30, // 아이콘 크기 조정
      color: Colors.red, // 아이콘 색상 변경
      splashColor: Colors.transparent, // 터치 시 효과 제거
    ),
  ],
),

이처럼 iconSize, color, splashColor 속성을 사용하여 원하는 스타일로 이미지 버튼을 커스터마이징할 수 있습니다.

마무리

이제 Flutter의 Row 위젯에서 이미지 버튼을 사용하는 방법에 대해 알아보았습니다. IconButton 위젯을 활용하여 다양한 기능을 가진 이미지 버튼을 만들 수 있으며, 스타일링을 통해 원하는 디자인을 적용할 수 있습니다. 이를 기반으로 프로젝트에서 필요한 이미지 버튼을 활용해보세요.

참고 링크:

• Flutter IconButton class documentation