728x90
반응형

widget tree 2

[Flutter] VSCode Settings : 플러터 개발을 편하게 하기위한 VSCode 환경설정

📎 Save(Ctrl+S) 저장 시 코드 자동 수정 기능 VSCode Settings > Command Palette (Ctrl+Shift+P) > open user settings (JSON) 입력JSON 파일을 열어서 아래와 같이 추가해 준다. "editor.codeActionsOnSave": {     "source.fixAll": true,}위 코드를 추가해 주면 저장할 때 constant여야 하는 변수들은 알아서 const를 붙여준다. "[dart]": {     "editor.formatOnSave": true,},위 코드도 추가하면 저장할 때 알아서 코드 라인을 정리해 준다.마지막에 ,(콤마)를 붙여주면 라인 정리를 해 줌.   📎  위젯 트리 한눈에 보기 위한 설정 "dart.previ..

IT/DEV Study 2024.11.16

[Flutter] VSCode Developer Tools : Widget Inspector

Flutter 앱을 개발하면서 구조를 한눈에 보고 싶을 때,VSCode에 있는 개발자 도구 중 Widget Inspector를 사용할 수 있다. Debug 모드에서 아래와 같이 디버깅 중단 버튼 우측에 있는 버튼을 누르면,Widget Inspector가 실행된다.Widget Tree에서 현재 앱이 어떻게 구성되어 있는지 트리로 확인할 수 있고,우측에서 레이아웃을 미리볼 수 있다. Widget Inspector 하단의 마우스 버튼을 누르면,Debug 실행중인 Simulator에서 영역을 선택해 위젯을 확인할 수 있다. Widget Inspector 우측 상단에 위 버튼을 클릭하면,아래와 같이 Simulator 화면에서 그리드를 확인할 수 있다.

IT/DEV Study 2024.11.15
728x90
반응형