import 'package:flutter/material.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({Key? key}) : super(key: key); @override State<HomeScreen> createState() => _HomeScreenState(); } class _HomeScreenState extends State<HomeScreen> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('버튼'), ), body: Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, // 가로 최대 사이즈 children: [ ElevatedButton( onPressed: () {}, style: ButtonStyle( /* * Material State * hovered - 호버링 상태(마우스 커서를 올려둔 상태) * focused - 포커스 됐을때 (텍스트 필드) * pressed - 눌렸을때 (버튼) * dragged - 드래그 됐을때 * selected - 선택됐을때 (체크박스, 라디오 버튼 등) * scrollUnder - 다른 컴포넌트 밑으로 스크롤링 됐을때 * disabled - 비활성화 됐을때 (버튼) * error - 에러상태 * * 일반적으로 버튼에서는 pressed, disabled, normal 세가지 상태만 사용한다. * */ backgroundColor: MaterialStateProperty.all( // 상태값과 상관없이 적용. styleFrom과 같음 Colors.black, ), foregroundColor: MaterialStateProperty.resolveWith( // resolveWith를 이용하면 특정 상태를 캐치하여 스타일을 바꿀 수 있다. (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 EdgeInsets.all(100.0); } return EdgeInsets.all(20.0); // return null // 기본값 리턴하면 변경 없음 }, ), elevation: MaterialStateProperty.resolveWith((states) => 10.0), // 이렇게 줄여서도 사용가능 ), child: Text('ButtonStyle'), ), /* * 버튼의 종류는 3가지 * 3가지 모두 별 차이는 없고, 각 성격에 따라 맞는 버튼을 사용하면 됨. * */ ElevatedButton( onPressed: () {}, style: ElevatedButton.styleFrom( // styleFrom 으로 간편하게 디자인 적용 foregroundColor: Colors.black, // 글자 및 애니메이션 색깔 backgroundColor: Colors.red, // 배경 색깔 shadowColor: Colors.green, // 그림자 색깔 elevation: 10.0, // 3D 입체감의 높이 textStyle: TextStyle( // text 스타일 fontWeight: FontWeight.w700, fontSize: 20.0, ), padding: EdgeInsets.all(32.0), // padding side: BorderSide( // 테두리 color: Colors.black, width: 4.0, ), ), child: Text( 'ElevatedButton', ), ), OutlinedButton( onPressed: () {}, style: OutlinedButton.styleFrom( foregroundColor: Colors.green, // 글자 색 , 애니메이션 효과 색깔 backgroundColor: Colors.yellow, elevation: 10.0, ), child: Text( 'OutlinedButton', ), ), TextButton( onPressed: () {}, style: TextButton.styleFrom( foregroundColor: Colors.black, backgroundColor: Colors.green, ), child: Text('TextButton'), ) ], ), ), ); } }