Flutter에서 border-radius가 있는 둥근 버튼 / 버튼을 만드세요., Create a rounded button / button with border-radius in Flutter

질문

I'm currently developing an Android app in Flutter. How can I add a rounded button?

답변

1. 솔루션 요약

FlatButton과 RaisedButton은 더 이상 사용되지 않습니다.

따라서 TextButton과 ElevatedButton에 대해 style 속성에 배치된 shape를 사용할 수 있습니다.

Flutter 2.0 이후에는 몇 가지 변경 사항이 있습니다.

• style: 속성 유형이 ButtonStyle로 변경되었습니다.
• shape: 속성 유형이 MaterialStateProperty<T>로 변경되었습니다.

2. 둥근 버튼

style 속성 내부에 shape 속성이 있습니다.

style: ButtonStyle(   shape: MaterialStateProperty.all<RoundedRectangleBorder>(     RoundedRectangleBorder(       borderRadius: BorderRadius.circular(18.0),       side: BorderSide(color: Colors.red)     )   ) ) 

사각형 버튼

사각형 버튼을 만들려면 ElevatedButton을 사용하거나 다음을 추가할 수 있습니다.

style: ButtonStyle(   shape: MaterialStateProperty.all<RoundedRectangleBorder>(     RoundedRectangleBorder(       borderRadius: BorderRadius.zero,       side: BorderSide(color: Colors.red)     )   ) ) 

전체 예제

Row(   mainAxisAlignment: MainAxisAlignment.end,   children: [     TextButton(       child: Text(         "Add to cart".toUpperCase(),         style: TextStyle(fontSize: 14)       ),       style: ButtonStyle(         padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),         foregroundColor: MaterialStateProperty.all<Color>(Colors.red),         shape: MaterialStateProperty.all<RoundedRectangleBorder>(           RoundedRectangleBorder(             borderRadius: BorderRadius.circular(18.0),             side: BorderSide(color: Colors.red)           )         )       ),       onPressed: () => null     ),     SizedBox(width: 10),     ElevatedButton(       child: Text(         "Buy now".toUpperCase(),         style: TextStyle(fontSize: 14)       ),       style: ButtonStyle(         foregroundColor: MaterialStateProperty.all<Color>(Colors.white),         backgroundColor: MaterialStateProperty.all<Color>(Colors.red),         shape: MaterialStateProperty.all<RoundedRectangleBorder>(           RoundedRectangleBorder(             borderRadius: BorderRadius.zero,             side: BorderSide(color: Colors.red)           )         )       ),       onPressed: () => null     )   ] )