[flutter] 변경된 버튼들(FlatButton,Outline Button,RaisedButton)

변경된 버튼 종류

버튼종류	변경	모양
FlatButton	TextButton
OutlineButton	OutlinedButton
RaisedButton	ElevatedButton

1.FlatButton -> TextButton

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.Outline Button -> OutlinedButton

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.RaisedButton -> ElevatedButton

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'),
)