Flutter 플러터 마이그레이션 작업 | 변경된 버튼 들

1. FlatButton > Text Button

 

같은 스타일의 버튼이지만 스타일 문법이 변화하였다.

 

FlatButton(
  onPressed: null,
  child: null,
  color: Colors.white,
),

 

TextButton(
  onPressed: null,
  child: null,
  style: TextButton.styleFrom(
    primary: Colors.white,
  ),
),

 

2. OutlineButton > OutlinedButton

 

3. RaisedButton > ElevatedButton

 

실제로 우리 프로젝트에서 변경점이 가장 컸던 부분...

마찬가지로 스타일 문법이 변화하였다.

 

Widget okButton = ButtonTheme(
    minWidth: MediaQuery.of(context).size.width,
    height: 56,
    child: RaisedButton(
        color: Color(0xff7a66fc),
        textColor: Color(0xffffffff),
        onPressed: _checkAgree,
        padding: EdgeInsets.all(0.0),
        child: Text(tr('terms.agreement'), style: TextStyle(color: Color(0xffffffff)))
    )
);

 

Widget okButton = SizedBox(
    width: MediaQuery.of(context).size.width,
    height: 56,
    child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          primary: Color(0xff7a66fc),
          onPrimary:  Color(0xffffffff),
          padding: EdgeInsets.all(0.0),
        ),
        onPressed: _checkAgree,
        child: Text(tr('terms.agreement'), style: TextStyle(color: Color(0xffffffff)))
    )
);

 

스타일 속성은 styleFrom에 선언해준다.

color -> Primary

textColor -> onPrimary

다른 속성값들은 거의 똑같이 사용되고 있었다.

 

버튼을 감싸고 있던 ButtonTheme 의 width 와 height 가 적용되지 않았기 때문에

SizedBox로 변경해주었더니 잘 적용되었다.