728x90
🔥 Widget Inspector 란?
- Flutter는 모든 것이 위젯이다. 위젯을 하나하나 분석하고 테스트할 수 있도록 도와주는 개발자 도구가 Widget Inspector이다
[공식 문서]
📎 https://docs.flutter.dev/tools/devtools/inspector
Flutter 위젯 인스펙터는 Flutter 위젯 트리를 시각화하고 탐색할 수 있는 강력한 도구입니다.
Flutter 프레임워크는 위젯을 컨트롤(텍스트, 버튼, 토글 등)부터 레이아웃(중앙 배치, 패딩, 행, 열 등)에 이르기까지 모든 것을 위한 핵심 빌딩 블록으로 사용합니다. 인스펙터는 Flutter 위젯 트리를 시각화하고 탐색하는 데 도움이 되며, 다음과 같은 용도로 사용할 수 있습니다:
- 기존 레이아웃 이해
- 레이아웃 문제 진단
📎 플러터에서 위젯의 개념은? (StatelessWidget, StatefulWidget)
https://devocean.sk.com/blog/techBoardDetail.do?ID=165056&boardType=techBlog
🔥 Widget Inspector 열기
이때 터미널로 flutter run 하는 것이 아니라, VSCode에서 debug모드를 실행시킨 상태에서 해야 한다 (오른쪽에 이미지가 debug모드를 실행하는 아이콘이다)
🔥 방법 1
- VSCode에서 command + shift + p로 검색
- Dart: Open DevTools 입력
- Open Widget Inspector Page 클릭
🔥 방법 2
- VSCode에서 debug모드를 실행하면 옆에 이미지처럼 도구들이 뜬다. 그럼 그중 맨 오른쪽 돋보기를 클릭하면 열린다
🔥 Widget Inspector 연 모습
728x90
'Flutter > VSCode 에서 Flutter 사용' 카테고리의 다른 글
| [Flutter] Flutter 에서 브라우저 열기 'url_launcher' (0) | 2024.08.26 |
|---|---|
| [Flutter] API 호출 하기 위해 HTTP 패키지 설치, 에러 해결 과정 (0) | 2024.08.14 |
| [Mac 환경] VSCode에서 Flutter 개발 시 Show Code Actions💡사용 (0) | 2024.08.11 |
| [Mac 환경] VSCode에서 Flutter 개발 시 편리성 높여주는 셋팅 2가지 (0) | 2024.08.09 |
| [Mac 환경] Flutter 처음 시작, VSCode에서 에뮬레이터(Emulator) 실행 (0) | 2024.08.07 |
