Installation

Flutter install(방법 1, 2중 아무거나 선택)

방법1

• https://docs.flutter.dev/get-started/install 이동

Install

• 운영체제에 따라서 선택

설치 방법대로 차분히 설치

 

방법2

• https://chocolatey.org/install

Installing Chocolatey

• Step 2 방법대로 설치

 

 

Android Studio 설치

• https://docs.flutter.dev/get-started/install/windows#android-setup
• Android나 IOS 모두 설치하려 하지 말고 하나만 일단 해보자 **중요

Windows install

 

 

VSCode Settings

Dart Extention 설치

Flutter Extention 설치

Terminal 실행

• flutter create "앱 이름"3
• "cd 앱이름"을 통해 앱으로 이동
• code . 를 통해 vscode 실행

Extention 설치

• Dart: Dart 사용을 위한 Extention
• Flutter: Flutter 사용을 위한 Extention
• Error Lense: Error가 생성되면 빨간글씨로 코드 옆에 에러를 띄워줌
•  VSCode 재시작 (우측하단에 실행할 수 있는 시뮬레이터 확인)
• Explorer 안에 lib 폴더의 main을 확인하고 디버깅 모드 클릭하면 flutter 실행 가능

 

VSCode Settings

• 코드를 작성할때 구불구불한 파란줄이 나타난다. 이는 const변수를 사용하는것을 추천한다고 한다.
  • warning: Prefer const with constant constructor
  • constant변수는 절대 바뀌지 않는 변수이면서, value를 사전에 알 수 있는 변수이다.
  • 그래서 변하지 않는 색상, 사이즈 박스 크기, 텍스트 등에 const변수가 사용됨
  • const를 쓰면 컴파일중에 값을 알 수 있으므로 프로그램의 성능에 도움을 준다.
  • 따라서 우리는 이걸 구별하는데 신경을 쓰면 좋지만 귀찮고, 놓칠수도 있다.
  • 그렇기 때문에 저장시 이것을 알아서 진행해주는 세팅을 추가한다.
  • vscode상에서 ctrl + shift + p 를 눌러 user open settings를 입력해서 .json파일을 연다
  • 그리고 하단의 "editor.codeActionsOnSave" 키에 value로 "source.fixAll": true를 입력한다.
  • 코드로 돌아가 저장하면 파란줄이 사라지며 자동으로 const변수가 생성되는 것을 확인할 수 있다.
• 부모가 무엇인지 알려주는 Guide라인 설정
  • "dart.previewFlutterUiGuides": true를 입력한다.
  • vscode를 재시작하면 라인에 가이드가 생긴것을 확인한다.

vscode settings