Button에 Border Radius 를 만들고 싶을때

Flutter 관련된 화면  UI를 만들다 보니 막히는 부분이 많네요 ㅠ. ㅠ
일단 Material Class에 대한 이해를 안 하고 단순 예제파일만 보고 진행을 하다보니 막히는것 같습니다.

Material Class 에 대한 소개는 아래와 같습니다.

Reference Url : api.flutter.dev/flutter/material/Material-class.html

Material class - material library - Dart API

위의 API를 읽어 보시면 Material 과 관련된 UI에서 할 수 있는 API 가 설명이 잘 나와있습니다.

Shape

The shape for material is determined by shape, type, and borderRadius.

• If shape is non null, it determines the shape.
• If shape is null and borderRadius is non null, the shape is a rounded rectangle, with corners specified by borderRadius.
• If shape and borderRadius are null, type determines the shape as follows:
  • MaterialType.canvas: the default material shape is a rectangle.
  • MaterialType.card: the default material shape is a rectangle with rounded edges. The edge radii is specified by kMaterialEdges.
  • MaterialType.circle: the default material shape is a circle.
  • MaterialType.button: the default material shape is a rectangle with rounded edges. The edge radii is specified by kMaterialEdges.
  • MaterialType.transparency: the default material shape is a rectangle.

- 위에도 설명이 되어있지만 material shape은 shape, type, borderRadius로 만들 수 있습니다.

 

BorderRadius cirdular적용 

위와 같이 일단 적용한 모습입니다.

RaisedButton(
                          child: Text('로그인', style: TextStyle(fontSize: 20)),
                          onPressed: fnGetText,
                          color: Color(0xff0091EA),
                          textColor: Colors.white,
                          splashColor: Colors.grey,
                          padding: EdgeInsets.fromLTRB(0, 10, 10, 10),
                          shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(10.0)),  //round를 주기 위한 옵션
                        ),

보시면 shape 을 선언하고 RoundedRectangleBorder를 준다고 선언하고 BorderRadius를 동그랗게 한다고 Circular에 값을 준 것입니다.