[Flutter] 라운드 형태 TextFiled 만드는 방법

Radius 값을 준 라운드 형태의 텍스트 필드를 구현하기 위해서 Card 위제을 사용해서 shape 에 Border 값을 주면 됩니다.

 

Card(
    elevation: 0,
    shape: RoundedRectangleBorder(
      side: BorderSide(
        color: Theme.of(context).colorScheme.outline,
      ),
      borderRadius: const BorderRadius.all(Radius.circular(12)),
    ),
    child: const SizedBox(
      width: 300,
      height: 100,
      child: Center(child: Text('Outlined Card')),
    ),
)

 

여기서 기본적으로 Card 위젯은 기본 margin 값(4)을 가지고 있다는것을 인지하고 사용해야 합니다. 저의 경우는 해당 Card 위젯의 시작 라인과 위의 텍스트의 라인을 맞추기 위해서 margin 을 제거해서 사용했습니다.

Card 위젯의 기본 margin 값

 

https://api.flutter.dev/flutter/material/Card-class.html

Card class - material library - Dart API