Flutter 앱을 개발하다 보면 종종 다이얼로그나 폼과 같은 부분에서 확인과 취소 버튼이 필요할 때가 있습니다. 이때 FlatButton을 사용하여 간단하게 확인/취소 버튼을 만들 수 있습니다.

1. FlatButton 추가하기

먼저, 해당 버튼을 추가할 화면의 위젯 코드에 FlatButton을 추가합니다.

FlatButton(
  onPressed: () {
    // 확인 버튼을 눌렀을 때 실행되는 코드
  },
  child: Text('확인'),
  color: Colors.blue,
),
FlatButton(
  onPressed: () {
    // 취소 버튼을 눌렀을 때 실행되는 코드
  },
  child: Text('취소'),
  color: Colors.red,
),

위 코드에서는 FlatButton 위젯을 생성하고, onPressed 콜백에서 각 버튼을 눌렀을 때 실행될 코드를 작성합니다. 또한, 버튼의 레이블과 색상을 설정하여 확인과 취소 버튼을 구분짓고 꾸밀 수 있습니다.

2. 버튼 동작 추가하기

onPressed 콜백 안에는 각 버튼을 눌렀을 때 실행되는 동작을 추가해야 합니다. 예를 들어, 확인 버튼을 눌렀을 때는 다이얼로그를 닫거나 데이터를 저장하는 등의 동작을 추가할 수 있습니다.

FlatButton(
  onPressed: () {
    // 확인 버튼을 눌렀을 때 실행되는 코드
    _submitForm();
    Navigator.of(context).pop();
  },
  //...
),

위 예제에서는 _submitForm() 함수를 호출하여 사용자가 입력한 데이터를 처리하고, Navigator를 사용하여 다이얼로그를 닫았습니다.

3. 스타일링

FlatButton 위젯을 사용하여 버튼을 만들 때 버튼의 스타일링도 중요합니다. 버튼의 색상, 텍스트 스타일, 모양 등을 원하는 대로 설정하여 UI를 더욱 멋지게 만들 수 있습니다.

결론

FlatButton을 사용하여 확인/취소 버튼을 만드는 방법을 알아보았습니다. 이를 응용하여 꽤 다양한 형태의 버튼을 만들 수 있으며, 간단한 UI 요소부터 복잡한 사용자 상호작용까지 다양하게 적용할 수 있습니다.

더 많은 정보는 Flutter 공식 문서를 참고하시기 바랍니다.