[flutter14] Buttons

ElevatedButton

✔️ 스타일 주기

어렵지 않으니 코드 쓱 적고 끝내기

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                //배경색
                backgroundColor: Colors.red,
                //배경 클릭했을 때 애니메이션 색 / text 컬러
                foregroundColor: Colors.yellow,
                //그림자 컬러
                shadowColor: Colors.green,
                //버튼 위치
                elevation: 10.0,
                //텍스트 스타일
                textStyle: TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 30
                ),
                //padding
                padding: EdgeInsets.all(30),
                //border
                side: BorderSide(
                  color: Colors.black,
                  width: 3
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

MaterialStateProperty.all()

❗️Material State

• hovered
• focused
• pressed
• dragged
• selected
• scrollUnder _ 다른 컴포넌트 밑으로 스크롤링 됐을 때
• disalbled
• error

라고 이런 MaterialState들이 있는데 MaterialStateProperty.all는 어떤 상태든 스타일을 통일시킨다.

MaterialStateProperty.resolveWith()

TextButton(
  onPressed: (){},
  child: Text('TextButton'),
  style: ButtonStyle(
  backgroundColor: MaterialStateProperty.resolveWith((states) => null)
  ),
)

MaterialStateProterty.resolveWith를 생성하면 처음에 콜백함수를 생성한다.
코드를 작성해 보자

style: ButtonStyle(
                //MaterialStateProterty.resolveWith를 생성하면 처음에 콜백함수를 생성한다.
                backgroundColor: MaterialStateProperty.resolveWith(
                  //생성된 콜백함수를 일반 함수로 변경
                  //스테이츠 파라미터에는 텍스트버튼이 해당되는 모든 MaterialState들이 안에 들어오게 된다.
                  (Set<MaterialState> states) {
                    //MaterialState 중 어떤 상태일 경우
                    if(states.contains(MaterialState.pressed)) {
                       return Colors.red;
                    }
                    return Colors.black;
                  }
                )
              ),