Live Template

Flutter 개발 시 자주 사용하는 코드 스니펫을 템플릿으로 만들어 생산성을 높이는 방법이다.

왜 Live Template을 쓸까: StatelessWidget 하나 만들려면 boilerplate 코드가 많다. 템플릿으로 만들어두면 stl + Tab으로 끝난다.

설정 위치

Android Studio / IntelliJ

• Settings → Editor → Live Templates → Dart 또는 Flutter

VS Code

• Settings → User Snippets → dart.json

Android Studio 템플릿 설정

새 템플릿 만들기

1. Settings → Editor → Live Templates
2. Flutter 그룹 선택 (없으면 + 버튼으로 생성)
3. • 버튼 → Live Template
4. Abbreviation, Description, Template text 입력
5. Define → Dart 선택

변수 사용

$NAME$      - 사용자 입력 변수
$END$       - 커서 최종 위치
$SELECTION$ - 선택된 텍스트

유용한 템플릿 모음

stless - StatelessWidget

Abbreviation: stless

class $NAME$ extends StatelessWidget {
  const $NAME$({super.key});

  @override
  Widget build(BuildContext context) {
    return $END$;
  }
}

stful - StatefulWidget

Abbreviation: stful

class $NAME$ extends StatefulWidget {
  const $NAME$({super.key});

  @override
  State<$NAME{{content}}gt; createState() => _$NAME$State();
}

class _$NAME$State extends State<$NAME{{content}}gt; {
  @override
  Widget build(BuildContext context) {
    return $END$;
  }
}

consumer - ConsumerWidget (Riverpod)

Abbreviation: consumer

class $NAME$ extends ConsumerWidget {
  const $NAME$({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return $END$;
  }
}

consumersf - ConsumerStatefulWidget (Riverpod)

Abbreviation: consumersf

class $NAME$ extends ConsumerStatefulWidget {
  const $NAME$({super.key});

  @override
  ConsumerState<$NAME{{content}}gt; createState() => _$NAME$State();
}

class _$NAME$State extends ConsumerState<$NAME{{content}}gt; {
  @override
  Widget build(BuildContext context) {
    return $END$;
  }
}

provider - Provider 정의

Abbreviation: provider

final $NAME$Provider = Provider<$TYPE{{content}}gt;((ref) {
  return $END$;
});

notifier - NotifierProvider 정의

Abbreviation: notifier

final $NAME$Provider = NotifierProvider<$NAME$Notifier, $TYPE{{content}}gt;(() {
  return $NAME$Notifier();
});

class $NAME$Notifier extends Notifier<$TYPE{{content}}gt; {
  @override
  $TYPE$ build() {
    return $END$;
  }
}

asyncnotifier - AsyncNotifierProvider 정의

Abbreviation: asyncnotifier

final $NAME$Provider = AsyncNotifierProvider<$NAME$Notifier, $TYPE{{content}}gt;(() {
  return $NAME$Notifier();
});

class $NAME$Notifier extends AsyncNotifier<$TYPE{{content}}gt; {
  @override
  Future<$TYPE{{content}}gt; build() async {
    return $END$;
  }
}

freezed - Freezed 클래스

Abbreviation: freezed

import 'package:freezed_annotation/freezed_annotation.dart';

part '$FILE_NAME$.freezed.dart';
part '$FILE_NAME$.g.dart';

@freezed
class $NAME$ with _$$NAME$ {
  const factory $NAME$({
    $END$
  }) = _$NAME$;

  factory $NAME$.fromJson(Map<String, dynamic> json) => _$$NAME$FromJson(json);
}

주요 단축키

기능	단축키
템플릿 삽입	Ctrl + J (Mac: Cmd + J)
템플릿 확장	Tab
다음 변수로	Tab
이전 변수로	Shift + Tab

관련 문서

• riverpod annotation - Riverpod 어노테이션
• freezed,JsonSerialiable - Freezed 코드 생성