[Flutter] 플러터 버튼 종류 (TextButton / OutlinedButton / ElevatedButton / Icon button)

flutter에서 주로 쓰이는 버튼은 FlatButton, RaisedButton, OutlineButton인데
TextButton, ElevatedButton, OutlinedButton으로 각각 변화되었다.
theme 또한 TextButtonTheme, ElevatedButtonTheme, OutlinedButtonTheme으로 바뀌었다.

style은 textcolor property 요소를 이용해 글꼴 색상을 지정했던 것과 달리
stylefrom property 내에서 color들을 지정한다.
primary , onsurface color가 parameter인 것을 보니
material design적인 요소가 많이 반영되었다는 생각이 들었다.

* 버튼 상태별로 버튼 스타일을 지정하고 싶다면?
https://seizemymoment.tistory.com/184

[Flutter] 플러터 2.0 버튼 상태(state) 별 색상 변화

---

1) TextButton (기존의 FlatButton)

TextButton( onPressed: () { // Respond to button press }, child: Text("TEXT BUTTON"), )

TextButton.icon( onPressed: () { // Respond to button press }, icon: Icon(Icons.add, size: 18), label: Text("TEXT BUTTON"), )

기존의 flat button에서 style문법이 변화했다.

FlatButton( textColor: Colors.red, // foreground onPressed: () { }, child: Text('FlatButton with custom foreground/background'), )

TextButton( style: TextButton.styleFrom( primary: Colors.red, // foreground ), onPressed: () { }, child: Text('TextButton with custom foreground'), ) 

2) OutlinedButton (기존 Outline Button)

OutlinedButton( onPressed: () { // Respond to button press }, child: Text("OUTLINED BUTTON"), )

OutlinedButton.icon( onPressed: () { // Respond to button press }, icon: Icon(Icons.add, size: 18), label: Text("OUTLINED BUTTON"), )

3) ElevatedButton (기존의 RaisedButton)

버튼을 강조하고 싶을 때 사용한다.

ElevatedButton( onPressed: () { // Respond to button press }, child: Text('CONTAINED BUTTON'), )

ElevatedButton.icon( onPressed: () { // Respond to button press }, icon: Icon(Icons.add, size: 18), label: Text("CONTAINED BUTTON"), )

기존의 RaisedButton와 style 문법이 차이난다.

RaisedButton( color: Colors.red, // background textColor: Colors.white, // foreground onPressed: () { }, child: Text('RaisedButton with custom foreground/background'), ) 

ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.red, // background onPrimary: Colors.white, // foreground ), onPressed: () { }, child: Text('ElevatedButton with custom foreground/background'), ) 

4) ToggleButtons

그룹 중 하나만 선택할 때 사용하는 버튼

final isSelected = <bool>[false, false, false]; ToggleButtons( color: Colors.black.withOpacity(0.60), selectedColor: Color(0xFF6200EE), selectedBorderColor: Color(0xFF6200EE), fillColor: Color(0xFF6200EE).withOpacity(0.08), splashColor: Color(0xFF6200EE).withOpacity(0.12), hoverColor: Color(0xFF6200EE).withOpacity(0.04), borderRadius: BorderRadius.circular(4.0), constraints: BoxConstraints(minHeight: 36.0), isSelected: isSelected, onPressed: (index) { // Respond to button selection setState(() { isSelected[index] = !isSelected[index]; }); }, children: [ Padding( padding: EdgeInsets.symmetric(horizontal: 16.0), child: Text('BUTTON 1'), ), Padding( padding: EdgeInsets.symmetric(horizontal: 16.0), child: Text('BUTTON 2'), ), Padding( padding: EdgeInsets.symmetric(horizontal: 16.0), child: Text('BUTTON 3'), ), ], )

5) Icon button

아이콘으로 이루어진 버튼이며 단일 항목을 선택하거나 해제할 때 주로 사용한다.

var isSelected = false; var icon = Icons.favorite_border; IconButton( icon: Icon(icon), color: Colors.white, onPressed: () { // Respond to icon toggle setState(() { isSelected = !isSelected; icon = isSelected ? Icons.favorite : Icons.favorite_border; }); }, )

* 버튼 상태별로 버튼 스타일을 지정하고 싶다면?
https://seizemymoment.tistory.com/184

[Flutter] 플러터 2.0 버튼 hover, pressed, focused, disable, overlay 상태(state) 변화 개발

---

material.io/components/buttons

Material Design

docs.google.com/document/d/1yohSuYrvyya5V1hB6j9pJskavCdVq9sVeTqSoEPsWH0/edit#

Migrating to the New Material Buttons and their Themes