[ Flutter ] TextField의 prefixIcon 사이즈 내맘대로 조절하기
어제보다 나은 사람이 되기

걱정보단 실행을, 그러나 계획적으로

Box World 자세히보기

개발/Flutter

[ Flutter ] TextField의 prefixIcon 사이즈 내맘대로 조절하기

Box형 2021. 2. 25. 09:57
반응형

 위와 같은 디자인을 구현하기 위해서는 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) {

                          },
                        ),
                      )

 

반응형