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으로 대체되어 사용되니 이 점 알고 사용하시면 되겠습니다. 감사합니다.'
[전체 소스 코드]
import 'package:flutter/material.dart'; | |
class TestView extends StatefulWidget { | |
@override | |
State<TestView> createState() => _TestViewState(); | |
} | |
class _TestViewState extends State<TestView> { | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
appBar: AppBar( | |
title: Text("Test Title"), | |
), | |
drawer: Drawer( | |
child: ListView( | |
padding: EdgeInsets.zero, | |
children: [ | |
const DrawerHeader( | |
decoration: BoxDecoration( | |
color: Colors.blue, | |
), | |
child: Text("Drawer Header Part"), | |
), | |
ListTile( | |
title: Text("Menu 1"), | |
), | |
], | |
), | |
), | |
body: Column( | |
children: [ | |
Center( | |
child: ElevatedButton( | |
style: ElevatedButton.styleFrom( | |
textStyle: TextStyle( | |
fontSize: 20, | |
), | |
), | |
onPressed: () {}, | |
child: Text("Elevated Button"), | |
), | |
), | |
Center( | |
child: TextButton( | |
style: TextButton.styleFrom( | |
backgroundColor: Colors.yellow, | |
primary: Colors.black, | |
), | |
onPressed: () {}, | |
child: Text("Text Button"), | |
), | |
), | |
Center( | |
child: OutlinedButton( | |
style: OutlinedButton.styleFrom( | |
primary: Colors.black, | |
shape: const RoundedRectangleBorder( | |
borderRadius: BorderRadius.all(Radius.circular(10)), | |
), | |
), | |
onPressed: () {}, | |
child: Text("Text Button"), | |
), | |
), | |
], | |
), | |
); | |
} | |
} |
[유튜브 강좌 영상]
'모바일어플개발 > 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 |