Flutter 생산성 올리는 팁

들어가며

노마드코더의 Flutter로 웹툰 만들기에서 알려준 자잘한 DX를 올리기 위한 팁을 정리한 글입니다.

Flutter 코딩 팁

VSCode 파란줄: const 쓰기

지금까지 개발하면서 계속 파란 줄이 생겼는데, 이는 const를 사용해 최적화할 것을 권장한다는 의미이다.

 

예를 들어 다음의 코드가 있을 때, 변수를 const로 선언해두면 컴파일시 dart는 각각의 변수를 메모리에 할당하는 대신 직접 값들을 치환해 최적화를 하게 된다.

const taxAmount = 15;
const priceAmount = 30;

var finalPrice = taxAmount + priceAmount;

 

마찬가지로 배경색의 '0xFF181818' 같은 애들도 변하지 않는 constant이기 때문에 const로 값을 선언하여 런타임 전 컴파일 단계에서 값을 산정하도록 최적화를 할 수 있다.

 

코드에 다음과 같이 일일이 파란 줄이 생기는 부분마다 직접 앞에 const를 붙여줄 수도 있지만

vscode의 command palette에서 open user settings로 settings.json 파일을 열고 다음의 셋팅을 추가해주면 저장할때마다 알아서 이 문제를 해결해준다.

"editor.codeActionsOnSave": {
        "source.fixAll": "explicit",
},
/*
Visual Studio Code v1.83부터 "editor.codeActionsOnSave"의 값들은 오직 string 형태로만 지원한다고 합니다!
"explicit" (기존 true), "always", "never" (기존 false)

공식: https://code.visualstudio.com/updates/v1_83
참고: https://github.com/microsoft/vscode/issues/194978
*/

또 다음의 설정을 true로 추가해주면 저장할때마다 자동으로 ,를 찍어준다.

"editor.formatOnSave": true,

부모자식 가이드

니코쌤이 추천하신 또 다른 셋팅이 있는데, 이는 코드의 요소의 부모자식관계가 어떻게 되는지 가이드라인을 만들어준다.

"dart.previewFlutterUiGuides": true,

 

Code Actions

코드를 간편하게 코드를 감쌀 수 있도록 하는 기능이다. 예를 들어 아래 코드에 Row에 Padding을 추가하고자 한다면 노란 전구를 눌러 Wrap with Padding을 눌러서 코드를 감쌀 수 있다.

반대로 지우고자 한다면 Remove this widget을 해주면 된다.

저기에 적혀있는 것 말고 커스텀 위젯같은 것으로 감싸고자 한다면 Wrap with widget을 눌러 플레이스홀더를 만들 수도 있다.

전구는 누르지 않고 Ctrl + .으로도 열 수 있다.

 

Error Lens

Error Lens라는 vscode extension은 에러가 발생할때 원인이 뭔지 확인하게 편하게 알려주는 것 같다.

예를 들어 Padding의 padding을 지우면 다음과 같이 에러가 난 곳에 빨간 글씨로 에러의 원인을 요약해서 보여준다.

 

위젯 만들기

위젯을 만드는 것은 간단하다. Container의 전구를 누른 후 Extract Widget을 누르고 이름을 지정해주면 된다.

예를 들어 MyButton이란 이름을 입력했다면 다음 이미지들처럼 MyButton이란 새로운 커스텀 위젯을 만들어 주었다.