Button

해당 버튼의 스타일을 좀 더 쉽게 스타일링 하는 법

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.stretch,

  children: [

    ElevatedButton(
      style: ElevatedButton.styleFrom(
        // main color (primary)
        backgroundColor: Colors.red,
        // onPrimary (글자색도 바뀌고 누를 때 색도 바뀜)
        foregroundColor: Colors.black,
        // 그림자 색
        shadowColor: Colors.green,
        // 입체감
        elevation: 10.0,
        // 폰트 스타일 지정
        textStyle: const TextStyle(
          fontWeight: FontWeight.w700,
          fontSize: 20
        ),
        // padding
        padding: const EdgeInsets.all(32),
        // 테두리
        side: const BorderSide(
          color: Colors.black,
          width: 4
        )
      ),
      onPressed: () {},
      child: const Text('ElevatedButton')
    ),

    OutlinedButton(
      style: OutlinedButton.styleFrom(
        // main color (primary)
        foregroundColor: Colors.green,
        // 배경색 (굳이 하겠다면)
        backgroundColor: Colors.yellow,
        elevation: 5.0
      ),
      onPressed: () {}, 
      child: const Text('OutlinedButton')
    ),

    TextButton(
      style: TextButton.styleFrom(
        foregroundColor: Colors.brown
      ),
      onPressed: () {}, 
      child: const Text('TextButton')
    ),

  ]
),

진짜 버튼 스타일로 스타일링 하는 법

ElevatedButton(
  style: ButtonStyle(
    // 배경색 MaterialStateProperty <- 이거 꼭 감싸줘야된다고한다.
    backgroundColor: MaterialStateProperty.all(Colors.black),
    // 글자색
    // 이건(resolveWith) 이렇게 조건문으로 뭔갈 처리하고 싶을 때 사용하나봄
    foregroundColor: MaterialStateProperty.resolveWith(
      // Material state
      // 
      // hovered - 호버링 상태 (마우스 커서를 올려놓은 상태)
      // focused - 포커스 했을 때 (텍스트 필드)
      // pressed - 눌렀을 때 (o)
      // dragged - 드래그 했을 때 
      // selected - 선택했을 때 (체크박스, 라디오 버튼)
      // scrollUnder - 다른 컴포넌트 밑으로 스크롤링 됐을 때
      // disabled - 비활성화 됐을 때 (o)
      // error - 에러상태

      // 앱에서 사용할 때는 pressed , disabled , 기본상태 이 3개만 씀
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed)) {
          return Colors.white;
        }
        return Colors.red;
      }
    ),
    padding: MaterialStateProperty.resolveWith(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed)) {
          return const EdgeInsets.all(100);
        }
        return const EdgeInsets.all(10);
      }
    ),
  ),
	onPressed: () {}, 
  child: const Text('ButtonStyle')
),

강의에서는 primary로 되어있는데 primary 이렇게 되어있어서 수정해보니 맨 위에 적은 거처럼 바뀌어있었다.

수정된거로 외워야겠다.