프로그래밍/flutter

TextField 내부 padding 제거

인썸니아 2021. 9. 12. 00:40

TextField 위젯을 기본값으로 출력해 보면 text box 내부의 위, 아래 padding이 꽤 거슬릴 정도로 크다.

 

TextField(
  keyboardType: TextInputType.number,
  controller: textController,
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  ),
),

캡쳐이미지1

반응형

 

TextField 내부의 기본적인 여백은 Padding 위젯으로 TextField 위젯을 둘러싸서 설정해도 조절이 안된다. TextField의 decoration 속성에서 InputDecoration 위젯의  isDense 속성과 contentPadding 속성을 설정하여 조절할 수 있다.

 

TextField(
  keyboardType: TextInputType.number,
  controller: textController,
  decoration: InputDecoration(
    isDense: true,
    border: OutlineInputBorder(),
    contentPadding: EdgeInsets.all(10),
  ),
),

캡쳐이미지2
padding 이 줄었다!

 

 

TextField API 문서

 

TextField class - material library - Dart API

A material design text field. A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard. The text field calls the onChanged callback whenever the user changes the text in the field. If the user indicates that they ar

api.flutter.dev

InputDecoration API 문서

 

InputDecoration class - material library - Dart API

The border, labels, icons, and styles used to decorate a Material Design text field. The TextField and InputDecorator classes use InputDecoration objects to describe their decoration. (In fact, this class is merely the configuration of an InputDecorator, w

api.flutter.dev

 

반응형