플러터에서 CustomButton 만들기: 심화 가이드 및 활용 예시

Flutter에서 버튼은 앱과 사용자 간의 상호작용을 위한 필수적인 요소입니다. 기본적인 버튼 위젯 외에도 원하는 디자인과 기능을 가진 커스텀 버튼을 만들 수 있습니다.

이 블로그 포스팅에서는 CustomButton을 만드는 방법, 주요 속성, 활용 예시, 실제 코드 및 팁을 자세히 살펴보겠습니다.

1. CustomButton 기본 구조

CustomButton은 기본적으로 다음과 같은 구조를 가지고 있습니다:

class CustomButton extends StatelessWidget {
  const CustomButton({
    Key? key,
    required this.onPressed,
    required this.child,
    this.backgroundColor = Colors.blue,
    this.foregroundColor = Colors.white,
    this.elevation = 4.0,
    this.shape = const RoundedRectangleBorder(),
    this.padding = const EdgeInsets.all(16.0),
  }) : super(key: key);

  final VoidCallback onPressed;
  final Widget child;
  final Color backgroundColor;
  final Color foregroundColor;
  final double elevation;
  final ShapeBorder shape;
  final EdgeInsets padding;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        decoration: BoxDecoration(
          color: backgroundColor,
          borderRadius: shape.borderRadius,
          boxShadow: [
            BoxShadow(
              color: Colors.grey[300],
              offset: Offset(0.0, 2.0),
              blurRadius: 4.0,
              spreadRadius: 2.0,
            ),
          ],
        ),
        child: Padding(
          padding: padding,
          child: child,
        ),
      ),
    );
  }
}

 

• onPressed: 버튼 클릭 시 호출되는 함수를 지정합니다.
• child: 버튼에 표시할 위젯을 지정합니다.
• backgroundColor: 버튼의 배경색을 지정합니다.
• foregroundColor: 버튼에 표시되는 위젯의 색상을 지정합니다.
• elevation: 버튼 그림자 높이를 지정합니다.
• shape: 버튼 모양을 지정합니다.
• padding: 버튼 주변 여백을 지정합니다.

2. 주요 속성

CustomButton은 다음과 같은 주요 속성들을 가지고 있습니다:

• onPressed: (필수) 버튼 클릭 시 호출되는 함수
• child: (필수) 버튼에 표시할 위젯
• backgroundColor: 버튼 배경색
• foregroundColor: 버튼에 표시되는 위젯 색상
• elevation: 버튼 그림자 높이
• shape: 버튼 모양
• padding: 버튼 주변 여백
• highlightColor: 버튼 눌렀을 때 하이라이트 색상
• splashColor: 버튼 눌렀을 때 물결 효과 색상
• clipBehavior: 버튼 영역 밖의 자식 위젯 잘라내기 (예: ClipBehavior.antiAlias)
• materialTapTargetSize: 버튼 영역 크기 조절
• focusColor: 버튼 포커스 상태 시 색상
• hoverColor: 버튼 마우스 호버 시 색상
• disabledColor: 버튼 비활성화 시 색상
• visualDensity: 버튼 시각적 밀도 (데이터 밀도에 따라 버튼 크기 조정)

3. 활용 팁

• CustomButton을 사용하여 원하는 디자인과 기능을 가진 버튼을 만들 수 있습니다.
• 다양한 속성들을 사용하여 버튼의 모양, 색상, 그림자, 여백 등을 자유롭게 조정할 수 있습니다.
• onPressed 속성에 함수를 지정하여 버튼 클릭 시 원하는 작업을 수행할 수 있습니다.
• CustomButton은 다른 위젯들과 함께 사용하여 다양한 기능을 구현할 수 있습니다.

4. 실제 활용 예시

다음은 CustomButton을 사용하는 실제 코드 예시입니다:

children: <Widget>[
          CustomButton(
            onPressed: () {
              print('파란색 버튼 클릭됨');
            },
            child: Text('파란색 버튼'),
            backgroundColor: Colors.blue,
            foregroundColor: Colors.white,
          ),
          SizedBox(height: 20.0),
          CustomButton(
            onPressed: () {
              print('초록색 버튼 클릭됨');
            },
            child: Text('초록색 버튼'),
            backgroundColor: Colors.green,
            foregroundColor: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30.0),
            ),
          ),
          SizedBox(height: 20.0),
          CustomButton(
            onPressed: () {
              print('아이콘 버튼 클릭됨');
            },
            child: Row(
              children: <Widget>[
                Icon(Icons.add),
                SizedBox(width: 10.0),
                Text('아이콘 버튼'),
              ],
            ),
            backgroundColor: Colors.orange,
            foregroundColor: Colors.white,
            shape: StadiumBorder(),
          ),
        ],
      ),
    );
  }
}

 

• 코드 설명
  • 위 코드는 세 개의 CustomButton 버튼을 만드는 예시입니다.
  • 각 버튼마다 onPressed 속성에 함수를 지정하여 버튼 클릭 시 콘솔에 메시지를 출력합니다.
  • child 속성에는 버튼에 표시할 위젯을 지정합니다.
  • backgroundColor, foregroundColor, shape 속성을 사용하여 버튼의 디자인을 변경합니다.
  • RoundedRectangleBorder을 사용하여 모서리가 둥근 버튼, StadiumBorder를 사용하여 타원형 버튼, Icon을 사용하여 아이콘 버튼을 만듭니다.

5. 추가 고려 사항

• 접근성: 시각 장애인 사용자를 위해 버튼에 tooltip을 제공하는 것이 좋습니다.
• 성능: 애니메이션 효과를 사용할 때는 성능 영향을 고려해야 합니다.
• 테스트: 다양한 기기와 환경에서 CustomButton의 동작을 테스트해야 합니다.

6. 마무리

CustomButton은 Flutter에서 원하는 디자인과 기능을 가진 버튼을 만들 수 있는 유용한 도구입니다.

이 블로그 포스팅이 CustomButton을 사용하는 데 도움이 되었기를 바랍니다.

궁금한 점이나 추가적으로 알고 싶은 내용이 있으면 언제든지 질문해주세요.

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱