Flutter | FlatButton 없어지고 새로운 material button 사용해야 한다

FlatButton이 없어진뒤(deprecated and removed) 새로운 button을 적용해야 한다.

FlatButton 없어짐

depreacted Button 대체하는 새로운 Button들

FlatButton이 없어진지 오래되었다. 하지만 여전히 여러 강의자료 등에서 FlatButton을 사용하고 있다. 이렇게 현재 없어진 버튼들을 적용해 실습을 적용해야 할 때 사용할 수 있는 버튼들에 대해서 알아보자.

공식문서

일단 모든 정보는 공식문서에 잘 설명돼 있다. 공식 문서로 확인하고 싶다면, 아래 링크에서 확인 가능하다.

New Buttons and Button Themes

새로운 버튼

공식문서까지 안가고 현재 글에서 원하는 답을 찾을 수 있게 간략하게 정리해 보도록 하겠다. 없어진 버튼은 총 3가지 이다. FlatButton, RaisedButton, OutlineButton이다.

deprecated and removed : 
- FlatButton
- RaisedButton
- OutlineButton

FlatButton 대체 : TextButton

FlatButton은 TextButton으로 대체되었다. 사용하는 테마는 TextButtonTheme이다. FlatButton이 어떻게 TextButton으로 변경되었는지 아래 예시(출처 : docs.fluttder.dev)에서 확인할 수 있다.

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

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

RaisedButton 대체 : ElevatedButton

RaisedButton은 ElevatedButton으로 대체되었으며, 사용 테마는 ElevatedButtonThem이다. 

RaisedButton(
  disabledColor: Colors.red.withOpacity(0.12),
  disabledTextColor: Colors.red.withOpacity(0.38),
  onPressed: null,
  child: Text('RaisedButton with custom disabled colors'),
),

ElevatedButton(
  style: ElevatedButton.styleFrom(disabledForegroundColor: Colors.red),
  onPressed: null,
  child: Text('ElevatedButton with custom disabled colors'),
)

OutlineButton 대체 : OutlinedButton

OutlineButton은 OutlinedButton으로 대체되었고, 사용하는 테마는 OutlinedButtonTheme이다. 이름이 비슷하게 변경되어서 큰 혼란을 줄것같지는 않다.

OutlineButton(
  shape: StadiumBorder(),
  highlightedBorderColor: Colors.red,
  borderSide: BorderSide(
    width: 2,
    color: Colors.red
  ),
  onPressed: () { },
  child: Text('OutlineButton with custom shape and border'),
)

OutlinedButton(
  style: OutlinedButton.styleFrom(
    shape: StadiumBorder(),
    side: BorderSide(
      width: 2,
      color: Colors.red
    ),
  ),
  onPressed: () { },
  child: Text('OutlinedButton with custom shape and border'),
)