반응형
질문
나는 플러터에 새로 왔고 로그인 폼을 만들고 있습니다. 이를 위해 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,
...
),
)
반응형
댓글