Awesome Flutter Snippets
어썸 플러터 스니펫은 일반적으로 사용되는 플러터 클래스 및 메서드를 모아둔 것이다.
위젯 작성과 관련된 대부분의 보일러 플레이트 코드를 제거하여 개발 속도를 높여준다.
예를 들어, Stateless Widget위젯은 statelessW를 입력하여 만들 수 있도록 한다.
쉽게 말해서, 자주 사용되는 기본적인 클래스 및 메서드들을 쉽게 작성할 수 있도록 도와주는 익스텐션이라고 보면 된다.
* 보일러플레이트 코드(Boilerplate code) : 상용구 코드라고도 부르며, 여러 가지 상황에서 수정하지 않거나 최소한의 수정만을 거쳐 여러 곳에 필수적으로 사용되는 코드를 의미한다.
굳이, '이런 간단한 것들 때문에 익스텐션까지 설치해야해?' 라는 의문이 들 수도 있다.
해당 익스텐션 없이도 stateless/stateful widget을 만들 때는 'st' 두 글자만 쳐도 편하게 자동 완성 할 수 있다.
다만 자동 완성 안되는 것들이 더 많아서 메모장에 직접 한땀한땀 한 글자씩 작성하는 프로그래머가 아니라면,
코드를 알고 있어도 클래스나 메서드를 정의하기 귀찮은 순간이 많다.
해당 익스텐션을 설치하여 직접 사용하다 보니 코딩의 질이 훨씬 향상되는 느낌을 받았다.
특히 나의 경우는 didUpdateWidget, didChangeDependencies 를 사용하려다가 매번 인터넷 검색을 하는 나 자신을 발견하고 익스텐션을 설치했다. 이상하게 사용을 잘 하지 않는 메소드들은 자주 안써봐서 그런지 쉽게 외워지지가 않더라...
플러터 코드 자동 완성 익스텐션 설치
- VS Code(Visual Studio Code)에서 좌측의 'extensions' 탭으로 이동
- 마켓 플레이스에서 'awesome flutter' 검색
- 검색된 익스텐션을 install을 눌러 설치
사용 방법
코드 작성 시 원하는 코드를 어느정도 입력하면 자동 완성 목록에 노출이 된다.
노출된 자동 완성 키워드를 누르면 자동으로 해당하는 전체 메서드 혹은 클래스가 완성된다.
예시로 initState를 해보자.
ini 를 입력하였더니 initS가 보인다.
해당 키워드를 누르면 아래와 같이 initState 코드가 자동으로 완성 된다.
약어 목록 (Shorcut List)
자세한 것은 VS Code에서 익스텐션 설치 시, Awesome Flutter Snippets의 'DETAILS' 탭에서 약어를 확인할 수 있다.
대표적으로 몇 개만 나열해보겠다.
약어 : 메소드(클래스명)
- statelessW : Stateless Widget
- statefulW : Stateful Widget
- build : Build Method
- initS : initState
- dis : Dispose
- listviewB : ListView.Builder
- gridviewB : gridView.Builder
- statefulBldr : Stateful Builder
- singleChildSV : Single Child Scroll View
- futureBldr : Future Builder