Flutter ElevatedButton 스타일 지정하기

flutter 에서 기본적으로 가장 많이 사용하는 ElevatedButton의 스타일을 지정 해보자! 

 

 

원래는 '최대' 와 같은 버튼이 기본적으로 제공하는 버튼 스타일인데 사이즈와 색상을 설정해서 '현금매수' 나 그 옆의 버튼 처럼 커스텀 할 수 있다. 

 

 

ElevatedButton(
              onPressed: () {},
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
                foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
                fixedSize: MaterialStateProperty.all<Size>(Size.fromHeight(48)),
              ),
              child: const Text('현금매수', style : TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            ),

 

배경색 변경

backgroundColor: MaterialStateProperty.all<Color>(Colors.red),

 

 

글자색 변경 

foregroundColor: MaterialStateProperty.all<Color>(Colors.white),

 

버튼의 높이 변경 

fixedSize: MaterialStateProperty.all<Size>(Size.fromHeight(48)),