Flutter2가 되면 RaisedButton이 deprecated가 되었기 때문에 ElevatedButton으로 대체했습니다.

5764 단어 DartFlutter

개요



요 전날 Flutter2가 출시되었으므로 업데이트 해 보면.
RaisedButton 가 deprecated (비추천) 되었습니다.
ElevatedButton 로 바뀌는 것 같습니다.
(정확하게는 v2의 업데이트가 아닌 v1.25.0-8.1.pre의 업데이트 인 것 같습니다.)

이번은, 자신이 구현하고 있던 버튼의 일례를 이용해 치환에 대해서 예를 나타냅니다.

버튼 이미지



이런 버튼을 만들었습니다.


코드 변경



변경 전 (RaisedButton)


RaisedButton.icon(
  icon: Icon(Icons.event_note),
  label: Text("いつまで"),
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(10)),
  )
)

변경 후 (ElevatedButton)


RaisedButton 그리고, shape 를 적용하고 있었습니다만,ElevatedButton 에는 shape 항목이 없는 것 같습니다.
대신 style 로 디자인을 지정하는 형태로 되어 있습니다.
또, 디폴트 배색이 바뀌고 있었으므로, 그쪽의 지정도 추가하고 있습니다.
ElevatedButton.icon(
  style: ElevatedButton.styleFrom(
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(10)),
    ),
    primary: Color.fromARGB(255, 224, 224, 224), // 背景色
    onPrimary: Color.fromARGB(255, 0, 0, 0) // 文字色
  ),
  icon: Icon(Icons.event_note),
  label: Text("いつまで")
)

스타일을 지정하지 않은 경우



Style을 지정하지 않는 디폴트의 디자인은 이런 느낌이 되었습니다.

ElevatedButton.icon(
   icon: Icon(Icons.event_note),
   label: Text("いつまで")
)

보충



내 코드에서 사용하지 않았으므로 샘플을 표시하지 않지만,
이하 Widget도 변경이 있었던 것 같습니다.


변경 전
변경 후


FlatButton
TextButton

OutlineButton
OutlinedButton


마이그레이션의 경우 아래에 Google 문서 문서가 있었으므로,
자세한 정보가 필요한 분은 여기를 참조하십시오.

Migrating to the New Material Buttons and their Themes
htps : // / cs. 오, ぇ. 이 m / 도쿠 멘 t / d / 1 요 히스 Yrv 5 V1 hB6j9 pJs 또는 vCdVq9s

좋은 웹페이지 즐겨찾기