2022. 10. 28. 22:16ㆍ모바일어플개발/Flutter
안녕하세요~ totally 개발자입니다.
ElevatedButton, TextButton, OutlinedButton
오늘은 버튼을 만들 수 있게 해주는 위젯들(ElevatedButton, TextButton, OutlinedButton)에 대해서 살펴보겠습니다. 먼저 ElevatedButton 위젯부터 살펴보겠습니다.
ElevatedButton
ElevatedButton 위젯의 기본 구조를 보면 아주 간단하게 style, onPressed, child 등을 가지며 style로 버튼을 디자인할 수 있고, onPressed 기능을 통해 버튼을 눌렀을 때의 액션을 구성할 수 있고, child 속성을 통해서 버튼 내부 위젯을 생성할 수 있습니다.
이번에는 TextButton도 추가해보겠습니다.
TextButton
이번에는 TextButton 위젯을 추가해보았습니다. TextButton과 ElevatedButton의 차이는 제가 생각했을 때 쉽게 말해서 TextButton는 마치 HTML의 <a>태그처럼 Text를 버튼처럼 누를 수 있게 만드는 것이고 ElevatedButton는 일반적인 <button> 태그처럼 기본 배경색이 적용되는 버튼을 만들어준다고 생각하시면 됩니다. 마지막으로 OutlinedButton이 있습니다. 아래 화면으로 가보겠습니다.
OutlinedButton
위의 모습을 보시면 OutlinedButton에는 말 그대로 outline이 생긴 것을 확인해볼 수 있으며 58번째 shape를 통해 둥근 모서리를 적용할 수 있습니다. 쉽게 말해 TextButton에 Outline를 적용한 모습이라고 생각하시면 됩니다. 이렇게 3개의 버튼 위젯들을 알아보았는데 기존에 있었던 FlatButton, RaisedButton, OutlineButton는 deprecated 되어 더 이상 사용되지 않고 각각 TextButton, ElevatedButton, OutlinedButton으로 대체되어 사용되니 이 점 알고 사용하시면 되겠습니다. 감사합니다.'
[전체 소스 코드]
[유튜브 강좌 영상]
'모바일어플개발 > Flutter' 카테고리의 다른 글
| [020] 플러터 (Flutter) 배우기 - Navigator (화면 이동 - Navigator push, pop) (0) | 2022.11.05 |
|---|---|
| [019] 플러터 (Flutter) 배우기 - Icon (아이콘) + GestureDetector 적용 (0) | 2022.11.01 |
| [017] 플러터 (Flutter) 배우기 - Text, TextStyle (텍스트, 텍스트 스타일) (0) | 2022.10.26 |
| [016] 플러터 (Flutter) 배우기 - Gradient (그라데이션 적용) (2) | 2022.10.24 |
| [015] 플러터 (Flutter) 배우기 - Flexible, Expanded (반응형으로 만들기) (2) | 2022.10.23 |