반응형
위와 같은 디자인을 구현하기 위해서는 TextField를 이용하는데, 돋보기를 사이즈에 맞게 넣으려는데 애를 먹었다. 다음과 같이 prefixIcon에 Svg나 Png를 넣어주면 TextField 앞에 아이콘이 자리잡게 된다.
Container(
height: screenHeight*0.05,
width: screenWidth*0.836111,
child: TextField(
textAlign: TextAlign.left,
controller: textfieldControllerSearchLocation,
decoration: InputDecoration(
hintText: '지역별 검색',
hintStyle: TextStyle(
fontSize: screenWidth*(12/360),
color: hexToColor('#888888')
),
############################
prefixIcon: SvgPicture.asset(
GreyMagnifyingGlass,
width: screenWidth*(16/360),
),
############################
fillColor: hexToColor("#EEEEEE"),
filled: true,
border: OutlineInputBorder(),
isDense: true,
contentPadding: EdgeInsets.symmetric(vertical: screenHeight*(8/640)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
borderSide: BorderSide(width: 1,color: kPrimaryColor),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
borderSide: BorderSide(width: 1,color: hexToColor(("#EEEEEE"))),
),
),
onChanged: (value) {
},
),
)
그런데 아무런 옵션 없이 넣게되면 다음과 같이 아무리 width나 height를 바꿔도 사이즈가 고정된다.
이럴 경우 다음과 같이 Padding을 위아래로 주게되면 내가 원하는 크기로 줄일 수 있다.
Container(
height: screenHeight*0.05,
width: screenWidth*0.836111,
child: TextField(
textAlign: TextAlign.left,
controller: textfieldControllerSearchLocation,
decoration: InputDecoration(
hintText: '지역별 검색',
hintStyle: TextStyle(
fontSize: screenWidth*(12/360),
color: hexToColor('#888888')
),
##############################
prefixIcon: Padding(
padding: EdgeInsets.symmetric(vertical: screenHeight*(8/640)),
child: SvgPicture.asset(
GreyMagnifyingGlass,
width: screenWidth*(16/360),
),
),
##############################
fillColor: hexToColor("#EEEEEE"),
filled: true,
border: OutlineInputBorder(),
isDense: true,
contentPadding: EdgeInsets.symmetric(vertical: screenHeight*(8/640)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
borderSide: BorderSide(width: 1,color: kPrimaryColor),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
borderSide: BorderSide(width: 1,color: hexToColor(("#EEEEEE"))),
),
),
onChanged: (value) {
},
),
)
반응형
'개발 > Flutter' 카테고리의 다른 글
| [ Flutter ] TextField 내 hinttext 가운데로 정렬하기 (0) | 2021.02.28 |
|---|---|
| [ Flutter ] Google Map 현재 위치로 이동하는 버튼 만들기 (0) | 2021.02.26 |
| [ Flutter ] ExpansionTile로 숨김 / 드러내기 기능 구현해보기! (1) | 2021.01.12 |
| [ Flutter ] File Image 렌더링하기 (0) | 2021.01.06 |
| [ Flutter ] 갤러리 혹은 카메라에서 사진 가져오기 (1) | 2021.01.06 |