플러터에서 제공하는 다양한 버튼 종류

Flutter는 다양한 종류의 버튼을 제공하여 사용자 인터페이스를 풍부하고 매력적으로 만들 수 있도록 지원합니다.

각 버튼마다 고유한 특징과 용도를 가지고 있으며, 상황에 맞는 버튼을 선택하여 사용하는 것이 중요합니다.

이 블로그에서는 Flutter에서 제공하는 주요 버튼 종류와 각 버튼의 특징, 활용법에 대해 자세히 살펴보겠습니다.

1. 기본 버튼

ElevatedButton: 가장 일반적인 버튼으로, 눌렀을 때 눌린 느낌을 주는 3D 효과를 제공합니다. 주요 기능이나 중요한 작업을 수행하는 버튼으로 사용하기 적합합니다.

 

ElevatedButton(
  onPressed: () {
    print('ElevatedButton 클릭됨');
  },
  child: Text('ElevatedButton'),
),

 

OutlinedButton: 테두리만 있는 버튼으로, 주요 기능 외의 보조적인 작업을 수행하는 버튼으로 사용하기 적합합니다.

 

OutlinedButton(
  onPressed: () {
    print('OutlinedButton 클릭됨');
  },
  child: Text('OutlinedButton'),
),

 

TextButton: 텍스트만 있는 간단한 버튼으로, 덜 중요하거나 자주 사용하는 작업을 수행하는 버튼으로 사용하기 적합합니다.

 

TextButton(
  onPressed: () {
    print('TextButton 클릭됨');
  },
  child: Text('TextButton'),
),

 

IconButton: 아이콘만 있는 버튼으로, 공간을 절약하고 간단한 작업을 수행하는 버튼으로 사용하기 적합합니다.

 

IconButton(
  onPressed: () {
    print('IconButton 클릭됨');
  },
  icon: Icon(Icons.home),
),

 

FloatingActionButton: 화면 오른쪽 아래에 표시되는 버튼으로, 주요 기능이나 중요한 작업을 강조하기 위해 사용됩니다.

FloatingActionButton(
  onPressed: () {
    print('FloatingActionButton 클릭됨');
  },
  child: Icon(Icons.add),
),

 

2. 특수 버튼

RawMaterialButton: 기본적인 버튼 기능만 제공하는 버튼으로, 원하는 디자인을 직접 구현해야 합니다.

RawMaterialButton(
  onPressed: () {
    print('RawMaterialButton 클릭됨');
  },
  child: Text('RawMaterialButton'),
  fillColor: Colors.blue,
  splashColor: Colors.yellow,
),

 

CustomButton: 완전히 사용자 정의 가능한 버튼으로, 원하는 기능, 디자인, 애니메이션 등을 자유롭게 구현할 수 있습니다.

class CustomButton extends StatelessWidget {
  const CustomButton({
    Key? key,
    required this.onPressed,
    required this.child,
  }) : super(key: key);

  final VoidCallback onPressed;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        padding: const EdgeInsets.all(16.0),
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(30.0),
        ),
        child: child,
      ),
    );
  }
}

 

3. 버튼 속성

각 버튼 종류에는 공통적으로 사용할 수 있는 다양한 속성들이 있습니다.

• onPressed: 버튼 클릭 시 실행할 함수를 지정합니다.
• child: 버튼에 표시할 위젯을 지정합니다.
• style: 버튼의 스타일을 설정합니다. 배경색, 글자색, 여백, 모양 등을 변경할 수 있습니다.
• padding: 버튼 주변 여백을 설정합니다.
• splashColor: 버튼 눌렀을 때 표시되는 물결 효과 색상을 설정합니다.
• tooltip: 버튼에 대한 설명 텍스트를 설정합니다.

4. 활용 예시 (계속)

Scaffold(
  appBar: AppBar(
    title: Text('버튼 예시'),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () {
            print('기본 버튼 클릭됨');
          },
          child: Text('기본 버튼'),
        ),
        SizedBox(height: 20.0),
        OutlinedButton(
          onPressed: () {
            print('테두리 버튼 클릭됨');
          },
          child: Text('테두리 버튼'),
        ),
        SizedBox(height: 20.0),
        TextButton(
          onPressed: () {
            print('텍스트 버튼 클릭됨');
          },
          child: Text('텍스트 버튼'),
        ),
        SizedBox(height: 20.0),
        IconButton(
          onPressed: () {
            print('아이콘 버튼 클릭됨');
          },
          icon: Icon(Icons.favorite),
        ),
        SizedBox(height: 20.0),
        FloatingActionButton(
          onPressed: () {
            print('플로팅 버튼 클릭됨');
          },
          child: Icon(Icons.add),
        ),
      ],
    ),
  ),
);

 

이 코드는 다양한 버튼 종류를 화면 중앙에 배치하고, 각 버튼을 클릭했을 때 메시지를 출력하는 예시입니다.

실제 상황에서는 각 버튼에 적절한 기능을 연결하고, 디자인을 조정하여 사용자 인터페이스를 구현해야 합니다.

5. 마무리

Flutter는 다양한 버튼 종류와 속성을 제공하여 개발자가 원하는 디자인과 기능을 쉽게 구현할 수 있도록 지원합니다.

적절한 버튼을 선택하고 활용하여 사용자 경험을 향상시키고 매력적인 인터페이스를 만들 수 있습니다.

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

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

 

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

 

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

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