오늘의 소확행.“나도 이제 앱 만들 수 있다!!”YEAH!!!ㅎㅎㅎ뿌듯😎 자고로 개발자란,항시 자기 계발을 해야한다..^^ㅋ라는 소명(?) 아래 이번에는 또 뭘 공부해볼까 하며매번 “Hello World!”(만?) 하고 있는데욬ㅋㅋㅋ이번에는 Flutter를 열심히 공부 중이랍니다😆니꼬쌤이 강의하는 다트 강의 다 듣고 플러터 반쯤 들었는데, 이번에 POMODORO APP 강의 듣고 앱 만들기 해서 ㅋㅋㅋㅋ아직 걸음마 단계지만 그래도 일단 뿌듯하거든요 ㅋㅋㅋ😂😂😂목표는 내가 만든 윈도우 앱들 플러터로 만들기!ㅎㅎ열심히 공부해야지 :) Dart 시작하기 – 노마드 코더 Nomad CodersFlutter 앱 개발을 위한 Dart 배우기nomadcoders.co Flutter 로 웹툰 앱 만들기 – 노..

📎 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..

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

📎 VSCode 실행 후 새 프로젝트 생성Ctrl+Shift+P 입력Flutter: New Project 검색 후 클릭  📎  Template 선택템플릿 선택 창이 나오면 Application 클릭  📎  저장 경로 지정저장 경로 지정  📎  Project Name 생성원하는 프로젝트 이름 입력 후 엔터 자동으로 기본 앱 코드가 생성됨  📎  앱 실행하기F5로 디버깅하면 어떤 Simulator로 실행할 건지 선택할 수 있음Chrome 선택 Flutter Demo 앱이 실행됨기본으로 생성되는 앱은 +버튼을 클릭하면 화면 중앙의 Message의 카운트 수가 증가함기본으로 생성되는 앱에서 코드를 수정해 가며 프로그램을 만들 수 있습니다.

[목차]VSCode 설치하기VSCode에서 Flutter 설치하기Flutter SDK 설치하기Flutter SDK 시스템 환경 변수 설정Android Studio Flutter 설치Flutter Doctor 실행하기Flutter Doctor 이슈 해결 방법Flutter 설치 완료 📎 VSCode 설치하기 Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite pl..