[j Flutter] flutter 2.0 ver - 새로운 버튼 정리

Flutter 2.0 ver 새로운 버튼 정리

 

 

1. FlatButton ->  TextButton

TextButton(
            onPressed: () {},
            child: Text("Text Button"),
            style: TextButton.styleFrom(
              primary: Colors.red, //글자색
              onSurface: Colors.blue, //onpressed가 null일때 색상
              backgroundColor: Colors.green,
              shadowColor: Colors.orange, //그림자 색상
              elevation: 1, // 버튼 입체감
              textStyle: TextStyle(fontWeight: FontWeight.bold),
              padding: EdgeInsets.all(16.0),
              minimumSize: Size(200, 75), //최소 사이즈
              side: BorderSide(color: Colors.black, width: 2.0), //선
              shape:
                  BeveledRectangleBorder(), // : 각진버튼, CircleBorder : 동그라미버튼, StadiumBorder : 모서리가 둥근버튼,
              alignment: Alignment.bottomLeft, //글자위치 변경
            ),
          )

* style 적용 -> TextButton.styleFrom 사용

** ButtonStyle() 사용가능

 

2. Outline Button -> OutlinedButton

 

3. Raised Button -> ElevatedButton

ElevatedButton(
            onPressed: () {},
            child: Text('Elevated Button'),
            style: ButtonStyle(
                foregroundColor: MaterialStateProperty.all(
                    Colors.red), //syleForm에서  primarycolor랑 같다.
                backgroundColor: MaterialStateProperty.resolveWith((states) {
                  if (states.contains(MaterialState.disabled)) {
                    // disabled : onpressed가 null일때 , pressed : 클릭됐을때
                    return Colors.grey;
                  } else {
                    return Colors.orange;
                  }
                }),
                textStyle: MaterialStateProperty.resolveWith((states) {
                  if (states.contains(MaterialState.pressed)) {
                    return TextStyle(fontSize: 16);
                  } else {
                    return TextStyle(fontSize: 10);
                  }
                })),
          )

 

* 상태마다 스타일을 바꿔줄 수 있다. 

MaterialStateProperty.resolveWith((states) {
                  if (states.contains(MaterialState.pressed)) {
                    return ;
                  } else {
                    return ;
                  }
                })

 

 

***유튜브 코드팩토리 참고영상 

https://www.youtube.com/watch?v=gnxd61VRqvg&list=PLmEhRs1HB7RE8V-ozNeLV3qKdXPzICVx1&index=13