【Flutter】RaisedButton에서 ElevatedButton으로의 변경점

Flutter 버전이 2로 업데이트되면 RaisedButton이 더 이상 사용되지 않으며 편집기에서 선을 그립니다.



비추천이므로 그대로 사용할 수 있습니다만, 버전이 1의 코드를 옮기고 싶을 때라든지 잘 걸리므로 새로운 쓰는 방법을 정리해 둡니다.

새로운 버튼

RaisedButton은 버전 2에서 ElevatedButton으로 변경되었습니다.


이전 버튼
새로운 버튼


RaisedButton
ElevatedButton

RaisedButton(
  child: Text('RaisedButton'),
  onPressed: () {}
)

ElevatedButton(
  child: Text('ElevatedButton'),
  onPressed: () {}
)

쓰기는 이 시점에서 동일합니다.
디폴트로의 외형은 RaisedButton시는 회색 배경에 검은 문자,
ElevatedButton 시간은 파란색 배경에 흰색 문자로되어 있습니다.

장식 방법

그럼 이 버튼을 같은 배경색, 문자색으로 장식할 때의 차이를 봅시다.

RaisedButton

RaisedButton(
  onPressed: () {},
  splashColor: Colors.purple,
  child: Text('RaisedButton'),
  color: Colors.blue,
  textColor: Colors.white,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(6),
  ),
  elevation: 16,
  padding: EdgeInsets.symmetric(
    vertical: 15.0,
    horizontal: 100,
  )),
)

RaisedButton은 RaisedButton 바로 아래에서 각 장식의 속성을 채울 수있었습니다.
텍스트의 색상은 textColor 로 설정할 수 있습니다.
배경은 color, 버튼을 누르면 splashColor

ElevatedButton

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,
    onPrimary: Colors.purple,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(6),
    ),
    elevation: 16,
    padding: EdgeInsets.symmetric(
      vertical: 15.0,
      horizontal: 100,
    ),
  ),
  child: Text(
    'ElevatedButton',
    style: TextStyle(
      color: Colors.white,
    ),
  ),
)

ElevatedButton은 style: ElevatedButton.styleFrom 라고 쓰고 나서 그 바로 아래에 프롭퍼티를 쓰게 됩니다.
텍스트는 style: TextStyle 를 설정하고 나서 색등을 변경할 수 있습니다.
배경은 primary로 설정, 버튼을 누르면 onPrimary로 설정합니다.

이상이 새로운 버튼의 정리입니다.FlatButton 에서 TextButton 이나 OutlineButton 에서 OutlinedButton 도 비슷한 느낌입니다.