flutter - vscode에 flutter setting

flutter를 공부하기 위해 노마더 코더 강좌를 활용했다. 노마더코더 사이트에서 무료로 볼 수 있다. 강좌 중에 vs code에 dart 및 flutter를 설정하는 부분이 있어서 기록으로 남기려고 한다.

 

# object

   - flutter를 사용하기 위한 vs code setting

 

## blue line 없애기

const 변수 선언 없이 위젯을 사용하게 되면 아래 사진과 같이 물결 블루라인이 생길 수 있다. flutter에서 더욱 더 최적화를 하기위해서 변하지 않는 위젯들은 const 변수 선언이 필요하다. 아래 두 사진을 비교하면 const 유무에 따라서 블루라인이 사라진다.

    * 참고: dart에서 contant 즉, 변수를 선언 할 때, const 선언은 변수를 수정할 수 없고, compile을 하기 전에 value값를 알 수 있다.

No const 선언

const 선언

command palette에서 open user settings를 입력을 한다. 만약 안된다면 톱니바퀴(좌측하단) > settings > extension(좌측바) > dart에서 스크롤을 내리다 보면 Edit in setting.json을 클릭을 한다.

settings.json 파일에 아래와 같이 셋팅을 하게 되면...

 //저장과 동시에 vscode에서 필요한 부분에 const 생성
 "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  
  // 위젯으로 이루어져 있어서 콜백 지옥처럼 보기 어려움 
  // >>> 어떤 위젯인지 알 수 있도록 가이드라인 생성
  // vs code 재실행 필요
  "dart.previewFlutterUiGuides": true,

 

## 좌측에 있는 노란전구??

왼쪽에 노란 전구의 역할을 어떤 위젯에 부모 위젯을 넣을려고 할 때, 직접 위치를 찾지 않고, 왼쪽 노란 전구를 눌러서 부모 위젯을 만들고, 노란 전구가 있는 위젯을 자식으로 넣을 수 있다.

 

노란 전구를 클릭을 하게되면 어떤 위젯으로 감쌀지 리스트를 보여주고, 이 리스트에서 클릭을 하면 부모 위젯이 생성 또는 삭제가 된다.

중요한 것은 커서의 위치이다. 커서의 위치가 Container 위젯 앞쪽에 위치해 있어야 한다.

 

방금 있던 위치에서 Row 위젯으로 감싸면 아래처럼 부모 위젯을 만들 수 있다.

 

참조: 노마드코더 flutter로 웹툰만들기 강좌

https://nomadcoders.co/flutter-for-beginners/lobby

Flutter 로 웹툰 앱 만들기 – 노마드 코더 Nomad Coders