[Flutter] 플러터 버튼 위젯 - ElevatedButton, OutlinedButton, TextButton, IconButton

플러터(Flutter)의 기본 버튼 위젯은 플러터(Flutter) 버전 2.0 이상에서 ElevatedButton(구 RaisedButton), OutlinedButton(구 OutlineButton), TextButton(구 FlatButton)과 같이 변경되었습니다. 그 외에도 잘 사용되지는 않으나 CloseButton, FloatingActionButton 도 제공합니다. 자주 사용되는 ElevatedButton, OutlinedButton, TextButton의 기능은 상세하게 알아보고 그 외에 버튼 CloseButton, FloatingActionButton에 대해서도 간략하게 알아보도록 하겠습니다.

 

 

 

 플러터(Flutter) 버튼 소개 및 초간단 구현 방법

기본 버튼 간략 코드 및 결과 이미지

ElevatedButton : 플러터에서 제공하는 버튼중에 가장 기본적이 버튼이라 볼 수 있으며 배경 색상과 텍스트를 갖는 버튼입니다.

OutlinedButton : 기본 버튼이 ElevatedButton에서 배경색은 없고 버튼박스의 테두리와 텍스트를 갖는 버튼입니다.

TextButton : 화면 자체에서는 버튼으로 보이진 않고 텍스트로 보이지만 클릭이벤트를 갖는 텍스트 버튼입니다.

IconButton : 텍스트를 갖지 않는대신에 Icons에 정의된 아이콘의 형태를 갖는 버튼입니다.

CloseButton : 모바일에서는 새로운 창을 닫는 경우가 많이 존재하기 때문에 미리 만들어놓은 아이콘 버튼입니다.

FloatingActionButton : 단순한 사각형이 아닌 형태를 갖는 버튼입니다. 플러터 기본 프로젝트를 만들면 기본으로 보이는 버튼입니다.

 

 플러터(Flutter) 버튼의 스타일 변경(버튼 크기, 버튼 컬러)

플러터(Flutter)에서 버튼을 만들면 버튼 및 폰트의 컬러는 default Theme에 정의되어 있는 컬러로 나오게 되며, 버튼의 크기는 child 파라미터에 적용된 크기에 padding값을 적용한 크기로 자동으로 설정되어서 나오게 됩니다. 디폴트 컬러이기 때문에 앱 내에서 가장 안정감 있는 컬러를 사용하지만 개인 앱이 아닌 회사 프로젝트의 경우 디자이너가 요청하는 컬러와 사이즈를 맞춰야 하는 경우가 존재합니다.

버튼 크기, 컬러 코드 및 결과화면

ElevatedButton과 OutlinedButton의 경우 style매개변수에  해당하는 버튼의 전역함수인 styleFrom 함수를 통해 버튼의 색상, 아웃라인의 색상 및 굵기 등을 변경하실 수 있습니다. 또한 버튼의 크기는 상위 부모 위젯을 Container로 지정한 뒤 부모의 width, height 값을 지정하시면 해당 버튼의 크기를 변경하 실 수 있습니다. 

 

 

 

 플러터(Flutter) 초보를 위한 버튼 생성 코드의 궁금점 해결

1. 버튼에 style 매개변수에 아무것도 넣지 않아도 동작하는 이유는 뭘까?

언어에서 함수에는 디폴트 매개변수라는 개념이 있습니다. 사용자가 매개변수의 값을 넣지 않을 경우 기본으로 세팅해주는 값이라고 보면 됩니다. 우리가 style 매개변수에 아무런 값을 넣지 않고 사용자의 편의를 위해서 기본적으로 값이 세팅되어 있게 됩니다. 그리고 우리가 필요한 부분을 변경하면 그 부분만 변경해서 면에 보여주게 됩니다.

2. Container 매개변수 중 width에 double.infinty라고 되어있는데 이건 무슨 뜻인가요?

Container의 width는 Container의 넓이 값을 뜻하는데 double.infinity는 화면 최대 넓이라고 생각하시면 됩니다. 미디어 쿼리나 GetX를 통해서 화면에 넓이를 구해올 순 있지만 패팅 값이 들어가면 모두 계산해줘야 하는 코드가 들어가게 되는데 일일이 계산하느니 double.infinity를 쓰시면 자동으로 계산됩니다.

 

 플러터(Flutter) 버튼 마무리

플러터(Flutter)로 프로젝트를 진행하다 보면 플러터에서 제공해주는 위와 같은 다양한 버튼을 사용을 주로 합니다. 하지만 버튼 영역이 아닌 다른 상위 위젯까지 버튼 역할을 해야 하는 경우도 존재합니다. 이와 같은 경우에는 Inkwell, GestureDetector 위젯을 사용하여 버튼 클릭이벤트를 받을 수 있습니다. 추후 해당 위젯에 대해 서로 다뤄보도록 하겠습니다.

 

- 플러터 버튼의 전체 코드는 아래 포스팅에서 확인이 가능합니다.

[Flutter] 플러터 버튼 위젯 - 소스코드