Flutter : 다양한 스타일의 버튼

Flutter는 앱의 사용성을 향상시키기 위한 다양한 버튼 스타일을 제공합니다. 이번 포스트에서는 Flutter에서 사용할 수 있는 다양한 버튼 유형들에 대해 자세히 살펴보겠습니다.

 

ElevatedButton

이전에는 RaisedButton으로 알려져 있던 이 버튼은 눌렀을 때의 입체감을 주는 디자인을 가지고 있습니다.

ElevatedButton(
  onPressed: () {
    // 버튼 클릭 시 실행될 코드
  },
  child: Text('ElevatedButton'),
)

 

TextButton

FlatButton의 새로운 이름인 TextButton은 배경 없이 텍스트만으로 구성된 간단한 버튼입니다.

TextButton(
  onPressed: () {
    // 버튼 클릭 시 실행될 코드
  },
  child: Text('TextButton'),
)

 

OutlinedButton

테두리가 있는 버튼으로, 중앙에는 아무런 채워진 색상이 없습니다.

OutlinedButton(
  onPressed: () {
    // 버튼 클릭 시 실행될 코드
  },
  child: Text('OutlinedButton'),
)

 

IconButton

아이콘을 사용하여 버튼을 생성합니다. 텍스트 없이 아이콘만으로 버튼의 기능을 표현할 수 있습니다.

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    // 아이콘 버튼 클릭 시 실행될 코드
  },
)

 

FloatingActionButton

머티리얼 디자인의 주요 요소 중 하나인 FloatingActionButton은 주로 화면의 우측 하단에 위치합니다. 주로 주요 작업, 예를 들어 새 게시물 작성이나 채팅 시작 등을 위해 사용됩니다.

FloatingActionButton(
  child: Icon(Icons.add),
  onPressed: () {
    // FAB 클릭 시 실행될 코드
  },
)

 

DropdownButton

다양한 옵션 중에서 하나를 선택할 수 있게 해주는 드롭다운 형식의 버튼입니다.

DropdownButton<String>(
  value: dropdownValue,
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
  items: <String>['One', 'Two', 'Three', 'Four']
    .map<DropdownMenuItem<String>>((String value) {
      return DropdownMenuItem<String>(
        value: value,
        child: Text(value),
      );
    }).toList(),
)

 

마치며...

Flutter는 다양한 버튼 스타일로 사용자와의 상호작용을 도와줍니다. 각 버튼 유형은 특정 환경과 작업에 맞게 최적화되어 있습니다. Flutter 앱을 디자인하면서 이러한 버튼들을 적절히 활용하여 사용자 경험을 향상시켜 보세요!