[flutter] ElevatedButton border radius(Elevatedbutton 둥글게)

ElevatedButton 모서리를 둥글게 하는 방법, 각지게하는 방법, 동그란 ElevatedButton 만드는 방법을 알아보겠습니다.

 

 

▣ ElevatedButton 둥글게 만들기(border radius설정은 안됨)

ElevatedButton을 둥글게 만들기 위해서는 ElevatedButton의 style인자를 이용해야 합니다. 아래 코드의 shape: StadiumBorder()을 이용하면 아래 버튼과 같이 모양을 만들 수 있습니다.

ElevatedButton둥글게

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
    minimumSize: Size(110,40),
    shape: StadiumBorder(),
  ),
  onPressed: () {},
  child: Text('버튼'),
),

 

 

▣ ElevatedButton 둥글게 만들기(border radius설정가능) 

ElevatedButton을 둥글게 하되 border radius설정을 가능하게 하는 코드입니다. 아래 코드를 보면 borderRadius: BorderRadius.circular(설정값)을 통해 ElevatedButton을 둥글게 만들 수 있습니다.

ElevatedButton둥글게borderradius설정가능

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
    minimumSize: Size(110,40),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
  onPressed: () {},
  child: Text('버튼'),
),

 

 

 

▣ ElevatedButton 각지게 만들기

잘 사용하진 않지만 ElevatedButton을 각지게 만들 수 있습니다. shape인자에 BeveledRectangleBorder을 이용하면 되고, 설정값을 통해 각짐의 정도를 조절할 수 있습니다.

ElevatedButton각지게만들기borderradius설정가능

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
    minimumSize: Size(110,40),
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),

 

 

▣ 동그란 ElevatedButton 만들기

shape인자를 CirCleBorder()로 주고, padding값을 이용해 ElevatedButton버튼의 크기를 설정할 수 있습니다.

동그란ElevatedButton

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
    shape: CircleBorder(),
    padding: EdgeInsets.all(20),
  ),
  onPressed: () {},
  child: Text('버튼'),
),