Flutter 유용한 Extensions(확장팩) 추천(Flutter Widget Snippets, Flutter Tree)

Flutter Widget Snippets

1. Visual Studio Code 열기:
   - Flutter 프로젝트를 개발 중인 Visual Studio Code를 엽니다.

2. Snippet 확장 설치:
   - Visual Studio Code의 왼쪽 사이드바에서 Extensions(확장) 아이콘을 클릭합니다.
   - 검색 상자에 "Flutter Widget Snippets"를 입력하여 해당 확장을 찾습니다.
   - "Flutter Widget Snippets" 확장을 선택하고 "Install" 버튼을 클릭하여 설치합니다.

3. Snippets 사용:
   - Flutter Widget Snippets가 설치되었으면, Flutter 코드 작성 중에 위젯을 빠르게 생성할 수 있습니다.
   - Dart 파일에서 위젯을 생성하려는 위치에 커서를 놓습니다.
   - 원하는 위젯을 생성하기 위해 해당 위젯의 약어를 입력합니다. 예를 들어, "sca"를 입력하면 `Scaffold` 위젯이 생성됩니다.
   - 약어를 입력한 후에는 자동 완성 기능이 작동하여 해당 위젯의 코드가 생성됩니다.
   - 필요한 매개변수를 입력하고 탭 키를 눌러 각 매개변수의 값을 설정할 수 있습니다.

4. 다양한 Snippets 사용:
   - Flutter Widget Snippets는 다양한 위젯에 대한 약어를 제공합니다. 일반적으로 사용되는 위젯에 대한 약어를 몇 가지 소개하겠습니다:
     - `sca`: Scaffold
     - `col`: Column
     - `row`: Row
     - `con`: Container
     - `txt`: Text
     - `btn`: ElevatedButton
     - `img`: Image
   

Flutter Tree

Flutter Tree는 Flutter 앱의 위젯 계층 구조를 시각적으로 표시해주는 기능을 제공합니다. 이를 통해 개발자는 앱의 위젯 트리를 쉽게 파악하고 디버깅할 수 있습니다.

Flutter Tree를 사용하여 Flutter 앱의 위젯 계층 구조를 시각화하는 방법은 다음과 같습니다.

1. Flutter Tree 확장팩 설치:
   - Visual Studio Code에서 "Extensions" 아이콘을 클릭하여 Marketplace로 이동합니다.
   - 검색 상자에 "Flutter Tree"를 입력하여 해당 확장팩을 찾고 설치합니다.

2. 앱 실행:
   - Flutter 프로젝트를 Visual Studio Code에서 열고, 앱을 실행합니다.
   - 앱이 실행 중인 상태에서 Flutter Tree를 활용하여 위젯 계층 구조를 확인할 수 있습니다.

3. 위젯 계층 표시:
   - Visual Studio Code의 왼쪽 사이드바에서 "Flutter" 아이콘을 클릭합니다.
   - 상단에 "Flutter Tree"를 선택하거나, 단축키 `Ctrl+Alt+T`를 사용하여 Flutter Tree를 엽니다.

4. 위젯 선택:
   - Flutter Tree 창에서 위젯을 선택합니다. 선택한 위젯은 시각적으로 강조됩니다.
   - 선택한 위젯에 대한 정보와 속성이 Flutter Tree 창에서 표시됩니다.

5. 위젯 필터링:
   - 위젯 계층 구조가 매우 복잡한 경우, 원하는 위젯을 찾기 위해 위젯 필터링 기능을 사용할 수 있습니다.
   - 상단의 검색 상자에 필터링할 위젯의 이름을 입력하여 해당 위젯만 표시할 수 있습니다.