Flutter 텍스트 필드의 콘텐츠 패딩을 어떻게 제거하나요?, How do I remove content padding from TextField?

질문

나는 플러터에 새로 왔고 로그인 폼을 만들고 있습니다. 이를 위해 TextField를 사용하고 접두사 아이콘을 추가했지만 텍스트 필드(사용자 ID 및 핀) 사이와 접두사 아이콘 앞에 추가 공간이 생깁니다. InputDecorationTheme도 시도해 보았지만 작동하지 않았습니다.

공간을 제거하거나 줄이는 방법을 알려주세요.??

아래는 내 코드입니다:

TextField(
  maxLength: 8,
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
    hintText: hint,
    hintStyle: TextStyle(fontSize: 12.0),
    prefixIcon: Icon(icon),
    counterText: '',
  ),
)

답변

업데이트 (2022년 8월): 플러터 3.0.5와 동일합니다.
업데이트 (2021년 4월): 플러터 2.0.4에서도 작동합니다.

플러터 1.17.5부터 (2.X에서도 동일) 패딩을 완전히 제거하거나 수동으로 조작하려면 먼저 isDense: true를 설정해야 하며, 그런 다음 원하는 대로 contentPadding을 조정하거나 부모 위젯에 패딩을 적용할 수 있습니다.

// 테마 사용
ThemeData(
  inputDecorationTheme: InputDecorationTheme(
     isDense: true, // 기본 컨텐츠 패딩을 제거합니다.
     // 여기에서 커스터마이즈하거나 패딩 위젯을 추가할 수 있습니다.
     contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
     ...
  ),
)

// 위젯별로 설정
TextField(
   decoration: InputDecoration(
     isDense: true,
     contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
     ...
   ),
)

Ataberk의 코멘트에서 언급된대로 contentPadding: EdgeInsets.zero도 사용할 수 있습니다.

TextField(
   decoration: InputDecoration(
     isDense: true,
     contentPadding: EdgeInsets.zero,
     ...
   ),
)