[Programming/Flutter] 생산성을 높여주는 단축키

플러터 코드롤 UI를 작성할 때 한 번에 완벽한 코드를 만들 수 있는 사람은 거의 없다. 작업 하다 보면 Column이나 Row로 감싸거나 Padding으로 감싸는 경우가 빈번하다. 그렇게 되면 나중에 수동으로 Padding을 제거하거나 Column을 제거하는 일이 발생해 굉장히 불편하다. 여러 위젯이 중첩된 코드 중간에 위젯을 추가하거나 삭제할 때 정확한 위치에 괄호를 넣거나 제거하는 것이 얼마나 어려운 일인지 겪어보면 알게 된다.

현재 위젯을 벗겨내거나 다른 위젯으로 감싸는 방법

Visual Studio Code

단축키 : <Cmd + .>

Android Studio

단축키 : <Alt + Enter>

다른 위젯으로 감싸고 싶은 위젯 코드 앞에 커서를 두고 "단축키"를 누른다. Wrap with XXX 형태로 메뉴가 표시되는데 XXX 위젯으로 감싸는 메뉴이다. Center, Column, Container, Padding, Row, StreamBuilder로 감싸는 메뉴가 별도로 있고, 그 밖의 위젯으로 감쌀 수 있다.

• Wrap with XXX : XXX 위젯으로 감싼다.
• Wrap with widget... : 메뉴에 없는 그 밖의 위젯으로 감싼다.
• Remove this widget : 현재 위젯을 벗긴다.

단축키 실행 모습

예를 들어 Center 글자 위에 커서를 두고 단축키를 눌러 표시된 메뉴에서 'Remove this widget'을 선택하면 Center 위젯이 벗겨진다. 반대로 벗겨진 코드에서 Text에 커서를 두고 단축키를 눌러 표시된 메뉴에서 'Wrap with Center'를 선택하면 원래대로 Center로 감쌀 수 있다.

현재 위젯을 Center 또는 Padding으로 감싸거나 Column 또는 Row의 자식으로 만들고 싶을 때 이 기능을 활용하면 쉽게 코드를 변경할 수 있다.

---

코드 정렬

플러터에서는 코드를 작성할 때 들여쓰기에 신경 쓰지 않으면 금방 정신없는 코드가 되기 쉽다. 그렇다면 매번 들여쓰기에 신경을 쓰면서 코딩하는 것도 굉장히 피곤한 일이다.

안드로이드 스튜디오에서는 코드를 정렬하는 기능을 제공한다. 허나 이 기능을 사용하려면 모든 프로퍼티의 마지막에 콤마(,)를 찍는 것이 습관화되어 있는 것이 좋다. 예를 들어 Text 위젯을 작성할 때도 두 번째 예처럼 마지막 프로퍼티 설정 후 콤마를 찍는다.

// 추천하지 않음
new Text('Hi~', style: new TextStyle(fontSize: 40))

// 이 방법을 추천
new Text('Hi~', style: new TextStyle(fontSize: 40,),) 

그리고 안드로이드 스튜디오의 메뉴 중 'Code > Reformat Code' (Ctrl + Alt + L) 기능을 수행한다. 마지막에 콤마를 찍은 경우에는 다음과 같이 코드의 들여쓰기 및 개행이 자동으로 적용된다.

// Reformat Code 적용 후

// 그대로다.
new Text('Hi~', style: new TextStyle(fontSize: 40))

// 리포맷 되었다.
new Text(
  'Hi~',
  style: new TextStyle(
    fontSize: 40,
  ),
)

코드를 작성하면서 틈틈이 'Code > Reformat Code' (Ctrl + Alt + L) 를 실행하면 일관성 있는 코드를 유지할 수 있다. 참고로 Visual Studio Code에서는 단축키를 누를 필요 없이 '파일 저장 (Ctrl + S)'을 하면 자동으로 Reformat Code가 실행된다.

---

StatelessWidget → StatefulWidget 변경 단축키

StatelessWidget에서 StatefulWidget으로 쉽게 변경할 수 있는 단축키가 있다. 

단축키 : <Alt + Enter>

StatelessWidget 위에 커서를 두고 단축키를 실행하면 StetefulWidget으로 쉽게 변경할 수 있다. 그런데 그 반대로 StatefulWidget에서 StatelessWidget으로는 변경할 수 없다.