본문 바로가기
개발관련/flutter

[flutter] 플러터 ElevatedButton border radius 둥글게 만들기

by BlueOcean&Shark 2022. 12. 9.

 

ElevatedButton 버튼의 모양을 둥글게 만드는 방법을 알아보겠습니다. 파란색으로 만든 버튼이 기본 버튼이고 빨간색으로 만든 버튼이 border radius를 주어 둥글게 만든 ElevatedButton입니다.

 

플러터ElevatedButton

 

▣ 기본 ElevatedButton

먼저 기본 ElevatedButton을 만들기입니다.

ElevatedButton(
  onPressed: () { },
  child: Text('다음페이지'),
),

 

ElevatedButton borderradius

BorderRadius.circular의 인자 값을 이용해 ElevatedButton을 둥글게 만들 수 있습니다. 아래는 ElevatedButton을 둥글게 만드는 코드입니다. 참고로 배경색 변경 방법도 코딩되어 있으니 참고하시기 바랍니다.

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.red,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(30.0),
    ),
  ),
  onPressed: () { },
  child: Text('다음페이지',),
),

 

 

댓글