플러터 ElevatedButton: VS Code자동 완성 스니펫

 

Flutter에서 ElevatedButton을 자주 사용하신다면, 이를 위한 Emmet 스타일의 스니펫을 만들 수는 없지만, VS Code에서는 User Snippets 기능을 사용해서 Flutter 코드도 자동완성되도록 설정할 수 있습니다.

아래는 ElevatedButton에 대한 스니펫을 설정하는 방법입니다.

1. VS Code에서 Flutter 스니펫 설정하기

1. VS Code에서 Ctrl + Shift + P를 눌러 Command Palette를 엽니다.
2. Preferences: Configure User Snippets을 검색하고 선택합니다.
3. Dart를 선택하여 Dart 언어용 스니펫 파일을 만듭니다.
4. 아래 예시처럼 스니펫을 추가합니다.

2. ElevatedButton 스니펫 코드

{
  "ElevatedButton": {
    "prefix": "elevatedButton",
    "body": [
      "ElevatedButton(",
      "  onPressed: () {",
      "    ${1://TODO: Add action}",
      "  },",
      "  child: Text('${2:Button Text}'),",
      ")"
    ],
    "description": "Snippet for ElevatedButton in Flutter"
  }
}

3. 설명

• prefix: elevatedButton이라고 입력하면 이 스니펫이 자동완성 제안으로 뜨게 됩니다.
• body: 실제로 생성될 ElevatedButton 코드입니다. $1, $2는 탭(Tab) 키를 눌러 이동할 수 있는 커서 위치를 의미합니다.
• description: 이 스니펫의 설명입니다.

4. 사용법

VS Code에서 Dart 파일을 편집할 때 elevatedButton이라고 입력한 후 탭(Tab) 키를 누르면, 자동으로 아래와 같은 코드가 생성됩니다.

ElevatedButton(
  onPressed: () {
    //TODO: Add action
  },
  child: Text('Button Text'),
)

 

이 스니펫을 통해 ElevatedButton을 빠르게 작성할 수 있습니다. onPressed나 child 내용도 간단하게 수정할 수 있도록 자동완성 커서를 제공합니다.

 

구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱