Search
Duplicate

VS Code에서 Flutter Icon 검색 팁

간단소개
어떤 아이콘인지 미리 보고싶을때 쉽게 볼 수 있는 방법
팔만코딩경 컨트리뷰터
ContributorNotionAccount
주제 / 분류
Flutter
VScode
Scrap
태그
flutter
VSCode
9 more properties
Contributor 활동 이후에 쓰는 첫 글이네요 ㅎㅎ 이번에 쓸 내용은 너무 간단해서 짧게 쓰지만 상당히 유용합니다.
VS Code에서 Flutter를 쓰다보면 Icon 위젯을 사용해야 할 때가 있습니다.
그런데 단순히 텍스트만 보고선 이 아이콘이 어떤 모양인지 알기 어려운 경우가 왕왕있습니다.
그럴때 아래 영상처럼 미리보기 버튼을 눌러 활성화 시키면 UI에 표시될 아이콘의 이미지를 볼 수 있습니다.
영상에 대해 좀 더 자세히 설명하겠습니다.
먼저 Icons라는 클래스에 스태틱 변수로 지정된 IconData들이 있습니다.
IconData는 하나하나 다른 아이콘 이미지를 나타냅니다.
IntelliSense를 켜서 IconData 목록을 보지만 단순히 텍스트들만 표시되어서 뭐가 어떤 이미지를 나타내는지 파악하기 어렵습니다.
영상에서 IntelliSense 목록 중 파란색 줄로 선택된 항목의 오른쪽 끝을 보면 > 화살표가 보입니다.
걔를 마우스로 클릭하게 되면 좀 더 많은 정보를 보여주는데 우리가 원하는 아이콘이 보이게 됩니다.

IntelliSense?

Mac OS 기준으로 VS Code에서 IntelliSense라는 기능이 있는데 이는 해당 라인에 적합한 내용을 추천하는 용도로 개발 편의성을 위해 자주 사용됩니다.
단축키는 cmd + space or cmd + esc 입니다. 저는 cmd + space 를 자주 썼지만 클러스터 맥에선 한영 전환이 되기 때문에 cmd + esc 를 사용합니다.