Buttons-버튼의종류

Flutter에서 버튼은 사용자 인터페이스의 중요한 요소로, 다양한 종류와 사용 방법이 있습니다. 각 버튼은 특정한 기능과 스타일을 제공하며, 사용자가 앱과 상호작용할 수 있도록 돕습니다. 아래에서 Flutter에서 제공하는 주요 버튼 종류와 그 사용 방법, 옵션들을 상세히 설명하겠습니다.

1. 버튼 종류

1.1. ElevatedButton

• 설명: 기본적인 입체 버튼으로, 그림자 효과가 있어 눌리는 느낌을 줍니다.
• 사용 예제:

  ElevatedButton(
    onPressed: () {
      // 버튼 클릭 시 동작
    },
    child: Text('Elevated Button'),
  )
  

1.2. TextButton

• 설명: 텍스트만 있는 버튼으로, 배경이 없고 주로 간단한 액션을 수행할 때 사용됩니다.
• 사용 예제:

  TextButton(
    onPressed: () {
      // 버튼 클릭 시 동작
    },
    child: Text('Text Button'),
  )
  

1.3. OutlinedButton

• 설명: 테두리가 있는 버튼으로, 배경이 없고 주로 강조가 필요한 경우 사용됩니다.
• 사용 예제:

  OutlinedButton(
    onPressed: () {
      // 버튼 클릭 시 동작
    },
    child: Text('Outlined Button'),
  )
  

1.4. IconButton

• 설명: 아이콘만 있는 버튼으로, 주로 툴바나 리스트 아이템에서 사용됩니다.
• 사용 예제:

  IconButton(
    icon: Icon(Icons.add),
    onPressed: () {
      // 버튼 클릭 시 동작
    },
  )
  

1.5. FloatingActionButton

• 설명: 원형의 부유 버튼으로, 주로 주요 액션을 강조할 때 사용됩니다.
• 사용 예제:

  FloatingActionButton(
    onPressed: () {
      // 버튼 클릭 시 동작
    },
    child: Icon(Icons.add),
  )
  

2. 버튼 옵션

각 버튼은 다양한 옵션을 통해 스타일과 동작을 조정할 수 있습니다. 아래는 주요 옵션들입니다.

2.1. onPressed

• 설명: 버튼이 클릭되었을 때 실행할 콜백 함수입니다. null로 설정하면 버튼이 비활성화됩니다.

2.2. child

• 설명: 버튼 내부에 표시할 위젯입니다. 일반적으로 Text, Icon, 또는 이 둘의 조합을 사용합니다.

2.3. style

• 설명: 버튼의 스타일을 정의하는 ButtonStyle 객체입니다. 다양한 속성을 통해 버튼의 색상, 모양, 크기 등을 조정할 수 있습니다.
• 예제:

  ElevatedButton(
    onPressed: () {},
    child: Text('Styled Button'),
    style: ElevatedButton.styleFrom(
      primary: Colors.blue, // 배경색
      onPrimary: Colors.white, // 텍스트 색상
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), // 패딩
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30), // 모서리 둥글기
      ),
    ),
  )
  

2.4. icon

• 설명: 버튼에 아이콘을 추가할 수 있는 옵션입니다. IconButton에서 주로 사용됩니다.

2.5. tooltip

• 설명: 버튼에 마우스를 올리거나 길게 누를 때 표시되는 설명 텍스트입니다. 사용자가 버튼의 기능을 이해하는 데 도움을 줍니다.

3. 버튼의 상태 관리

버튼의 상태를 관리하기 위해 StatefulWidget을 사용하여 버튼의 활성화/비활성화 상태를 조정할 수 있습니다.

예제:

class MyButton extends StatefulWidget {
  @override
  _MyButtonState createState() => _MyButtonState();
}

class _MyButtonState extends State<MyButton> {
  bool _isButtonEnabled = true;

  void _toggleButton() {
    setState(() {
      _isButtonEnabled = !_isButtonEnabled;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: _isButtonEnabled ? () {} : null,
          child: Text('Toggle Button'),
        ),
        TextButton(
          onPressed: _toggleButton,
          child: Text('Enable/Disable Button'),
        ),
      ],
    );
  }
}

4. 버튼의 접근성

Flutter에서는 버튼의 접근성을 고려하여 Semantics 위젯을 사용하여 버튼의 의미를 명확히 할 수 있습니다. 이를 통해 스크린 리더와 같은 보조 기술이 버튼의 기능을 이해할 수 있도록 돕습니다.

5. 버튼의 애니메이션

Flutter에서는 버튼 클릭 시 애니메이션 효과를 추가할 수 있습니다. AnimatedContainer를 사용하여 버튼의 크기나 색상을 애니메이션으로 변경할 수 있습니다.

결론

Flutter에서 버튼은 다양한 종류와 옵션을 통해 사용자 인터페이스를 구성하는 중요한 요소입니다. 각 버튼의 특성과 사용 방법을 이해하고 적절히 활용하면, 사용자 경험을 향상시킬 수 있습니다. 버튼의 스타일, 상태 관리, 접근성 등을 고려하여 앱의 디자인과 기능을 최적화하는 것이 중요합니다.

Widget 카테고리 내 다른 글 보러가기