[플러터] Flutter TextField icon, 테두리 적용

TextField 안에 Icon 위치

prefixIcon

            TextField(
              onChanged: (value){},
              decoration: const InputDecoration(
                prefixIcon: Icon(Icons.search,color: Colors.blueAccent,),
              ),
            ),

 

suffixIcon

            TextField(
              onChanged: (value){},
              decoration: const InputDecoration(
                suffixIcon: Icon(Icons.cancel,color: Colors.blueAccent,),
              ),
            ),

 

 

테두리 적용 및 아이콘 클릭 시 텍스트 초기화

상단에 TextEditingController  선언

 final TextEditingController _textEditingController = TextEditingController();

                TextField(
                  controller: _textEditingController,
                  decoration: InputDecoration(
                    hintText: 'hintText',
                    contentPadding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
                    border: const OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(4.0)),
                    ),
                    enabledBorder: const OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.blueAccent, width: 1.0),
                      borderRadius: BorderRadius.all(Radius.circular(4.0)),
                    ),
                    focusedBorder: const OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.blueAccent, width: 2.0),
                      borderRadius: BorderRadius.all(Radius.circular(4.0)),
                    ),
                    suffixIcon:  GestureDetector(
                      child: const Icon(
                        Icons.cancel,
                        color: Colors.blueAccent,
                        size: 20,
                      ),
                      onTap: () => _textEditingController.clear(),
                    ),
                  ),
                ),

텍스트 입력 전

텍스트 입력 후

x 아이콘 클릭 후