[Flutter] Dart 스니펫

최재원

Jul 30, 2025

Contents

안드로이드 적용법 커서 적용법 스니펫들 fst ment wc wf 사용 예시 riverVM riverFM riverGVM 커서용 완성 다트 스니펫

안드로이드 적용법

커서 적용법

Ctrl + Shift + P → "snippets" 검색 → Preferences: Configure User Snippets 선택

중괄호 안에 “Flutter … 내용 넣기

스니펫들

fst

뷰 시작 코드

커서용



	"Flutter Basic App Template": {
		"prefix": "fst",
		"body": [
			"import 'package:flutter/material.dart';",
			"",
			"void main() {",
			"  runApp(const MyApp());",
			"}",
			"",
			"class MyApp extends StatelessWidget {",
			"  const MyApp({super.key});",
			"",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return MaterialApp(",
			"      debugShowCheckedModeBanner: false,",
			"      home: ${1:MyScreen}(),",
			"    );",
			"  }",
			"}",
			"",
			"class ${1:MyScreen} extends StatelessWidget {",
			"  const ${1:MyScreen}({super.key});",
			"",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return Scaffold(",
			"      body: Placeholder(),",
			"    );",
			"  }",
			"}"
		],
		"description": "Flutter 기본 앱 템플릿 스니펫"
	}

스튜디오 용


import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {

  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: $NAME$(),
    );
  }
}

class $NAME$ extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Placeholder(),
    );
  }
}

ment

주석

커서용


	"Comment Header": {
		"prefix": "ment",
		"body": [
			"/// Created By ${1:YourName}, ${2:2025-06-19}",
			"/// ",
			"/// email : ${3:you@example.com}",
			"/// ",
			"/// tip : ${4:간단한 팁을 여기에 적으세요}"
		],
		"description": "주석"
	}

커서는 자동 날짜 완성이 없음

스튜디오용


/// Created By $NAME$, $DATE$
/// 
/// email : $EMAIL$
/// 
/// tip : $TIP$

wc

커스텀 위젯 클래스

커서용


	"StatelessWidget Template": {
		"prefix": "wc",
		"body": [
			"import 'package:flutter/material.dart';",
			"",
			"class ${1:MyWidget} extends StatelessWidget {",
			"  const ${1:MyWidget}({super.key});",
			"",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return ${2:Container()};",
			"  }",
			"}"
		],
		"description": "StatelessWidget 기본 템플릿"
	}

스튜디오용


import 'package:flutter/material.dart';

class $NAME$ extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return $WIDGET$;
  }
}

wf

커스텀 위젯 함수

커서용


  "Widget Named Function": {
    "prefix": "wf",
    "body": [
      "Widget ${1:NAME}() {",
      "  return SizedBox();",
      "}"
    ],
    "description": "Widget 함수 기본 스니펫"
  }

스튜디오용


  Widget $NAME$() {
    return SizedBox();
  }

사용 예시

이름 작성후 esc 키 연타

프로바이더 이름 소문자로 변경

riverVM

리버팟 뷰모델

커서용


	"Riverpod ViewModel & Model Template": {
		"prefix": "riverVM",
		"body": [
			"import 'package:flutter_riverpod/flutter_riverpod.dart';",
			"",
			"final ${1/(.)(.*)/${1:/downcase}${2}/}Provider = AutoDisposeNotifierProvider<${1}VM, ${1}Model?>(() {",
			"  return ${1}VM();",
			"});",
			"",
			"class ${1}VM extends AutoDisposeNotifier<${1}Model?> {",
			"  final mContext = navigatorKey.currentContext!;",
			"",
			"  @override",
			"  ${1}Model? build() {",
			"    return null;",
			"  }",
			"}",
			"",
			"class ${1}Model {",
			"  ${1}Model();",
			"",
			"  ${1}Model.fromMap(Map<String, dynamic> data);",
			"",
			"  ${1}Model copyWith() {",
			"    return this;",
			"  }",
			"}"
		],
		"description": "Riverpod Notifier + ViewModel + Model 템플릿"
	},

스튜디오용


import 'package:flutter_riverpod/flutter_riverpod.dart';

final $NAME$Provider = AutoDisposeNotifierProvider<$NAME$VM, $NAME$Model?>(() {
  return $NAME$VM();
});

class $NAME$VM extends AutoDisposeNotifier<$NAME$Model?> {
  final mContext = navigatorKey.currentContext!;

  @override
  $NAME$Model? build() {
    return null;
  }
}

class $NAME$Model {
  $NAME$Model();

  $NAME$Model.fromMap(Map<String, dynamic> data);

  $NAME$Model copyWith() {
    return this;
  }
}

riverFM

리버팟 폼모델

커서용


	"Riverpod State + FM + Model Template": {
		"prefix": "riverFM",
		"body": [
			"import 'package:flutter_riverpod/flutter_riverpod.dart';",
			"",
			"final ${1/(.)(.*)/${1:/downcase}${2}/}Provider = AutoDisposeNotifierProvider<${1}FM, ${1}Model>(() {",
			"  return ${1}FM();",
			"});",
			"",
			"class ${1}FM extends AutoDisposeNotifier<${1}Model> {",
			"  @override",
			"  ${1}Model build() {",
			"    return ${1}Model();",
			"  }",
			"}",
			"",
			"class ${1}Model {",
			"  ${1}Model();",
			"",
			"  ${1}Model copyWith() {",
			"    return this;",
			"  }",
			"}"
		],
		"description": "Riverpod 기본 FM + Model 템플릿 (AutoDispose)"
	},

스튜디오용


import 'package:flutter_riverpod/flutter_riverpod.dart';

final $NAME$Provider = AutoDisposeNotifierProvider<$NAME$FM, $NAME$Model>(() {
  return $NAME$FM();
});

class $NAME$FM extends AutoDisposeNotifier<$NAME$Model> {
  @override
  $NAME$Model build() {
    return $NAME$Model();
  }
}

class $NAME$Model {
  $NAME$Model();

  $NAME$Model copyWith() {
    return this;
  }
}

riverGVM

리버팟 글로벌 뷰모델

커서용


	"Riverpod Notifier GVM + Model Template": {
		"prefix": "riverGVM",
		"body": [
			"import 'package:flutter_riverpod/flutter_riverpod.dart';",
			"",
			"final ${1/(.)(.*)/${1:/downcase}${2}/}Provider = NotifierProvider<${1}GVM, ${1}Model>(() {",
			"  return ${1}GVM();",
			"});",
			"",
			"class ${1}GVM extends Notifier<${1}Model> {",
			"  final mContext = navigatorKey.currentContext!;",
			"",
			"  @override",
			"  ${1}Model build() {",
			"    return ${1}Model();",
			"  }",
			"}",
			"",
			"class ${1}Model {",
			"  ${1}Model();",
			"}"
		],
		"description": "Riverpod NotifierProvider GVM + Model 기본 구조"
	},

스튜디오용


import 'package:flutter_riverpod/flutter_riverpod.dart';

final $NAME$Provider = NotifierProvider<$NAME$GVM, $NAME$Model>(() {
  return $NAME$GVM();
});

class $NAME$GVM extends Notifier<$NAME$Model> {
  final mContext = navigatorKey.currentContext!;

  @override
  $NAME$Model build() {
    return $NAME$Model();
  }
}

class $NAME$Model {
  $NAME$Model();
}

커서용 완성 다트 스니펫


{
	"Flutter Basic App Template": {
		"prefix": "fst",
		"body": [
			"import 'package:flutter/material.dart';",
			"",
			"void main() {",
			"  runApp(const MyApp());",
			"}",
			"",
			"class MyApp extends StatelessWidget {",
			"  const MyApp({super.key});",
			"",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return MaterialApp(",
			"      debugShowCheckedModeBanner: false,",
			"      home: ${1:MyScreen}(),",
			"    );",
			"  }",
			"}",
			"",
			"class ${1:MyScreen} extends StatelessWidget {",
			"  const ${1:MyScreen}({super.key});",
			"",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return Scaffold(",
			"      body: Placeholder(),",
			"    );",
			"  }",
			"}"
		],
		"description": "Flutter 기본 앱 템플릿 스니펫"
	},
	"Comment Header": {
		"prefix": "ment",
		"body": [
			"/// Created By ${1:YourName}, ${2:2025-06-19}",
			"/// ",
			"/// email : ${3:you@example.com}",
			"/// ",
			"/// tip : ${4:간단한 팁을 여기에 적으세요}"
		],
		"description": "주석"
	},
	"Riverpod ViewModel & Model Template": {
		"prefix": "riverVM",
		"body": [
			"import 'package:flutter_riverpod/flutter_riverpod.dart';",
			"",
			"final ${1/(.)(.*)/${1:/downcase}${2}/}Provider = AutoDisposeNotifierProvider<${1}VM, ${1}Model?>(() {",
			"  return ${1}VM();",
			"});",
			"",
			"class ${1}VM extends AutoDisposeNotifier<${1}Model?> {",
			"  final mContext = navigatorKey.currentContext!;",
			"",
			"  @override",
			"  ${1}Model? build() {",
			"    return null;",
			"  }",
			"}",
			"",
			"class ${1}Model {",
			"  ${1}Model();",
			"",
			"  ${1}Model.fromMap(Map<String, dynamic> data);",
			"",
			"  ${1}Model copyWith() {",
			"    return this;",
			"  }",
			"}"
		],
		"description": "Riverpod Notifier + ViewModel + Model 템플릿"
	},
	"Riverpod State + FM + Model Template": {
		"prefix": "riverFM",
		"body": [
			"import 'package:flutter_riverpod/flutter_riverpod.dart';",
			"",
			"final ${1/(.)(.*)/${1:/downcase}${2}/}Provider = AutoDisposeNotifierProvider<${1}FM, ${1}Model>(() {",
			"  return ${1}FM();",
			"});",
			"",
			"class ${1}FM extends AutoDisposeNotifier<${1}Model> {",
			"  @override",
			"  ${1}Model build() {",
			"    return ${1}Model();",
			"  }",
			"}",
			"",
			"class ${1}Model {",
			"  ${1}Model();",
			"",
			"  ${1}Model copyWith() {",
			"    return this;",
			"  }",
			"}"
		],
		"description": "Riverpod 기본 FM + Model 템플릿 (AutoDispose)"
	},
	"Riverpod Notifier GVM + Model Template": {
		"prefix": "riverGVM",
		"body": [
			"import 'package:flutter_riverpod/flutter_riverpod.dart';",
			"",
			"final ${1/(.)(.*)/${1:/downcase}${2}/}Provider = NotifierProvider<${1}GVM, ${1}Model>(() {",
			"  return ${1}GVM();",
			"});",
			"",
			"class ${1}GVM extends Notifier<${1}Model> {",
			"  final mContext = navigatorKey.currentContext!;",
			"",
			"  @override",
			"  ${1}Model build() {",
			"    return ${1}Model();",
			"  }",
			"}",
			"",
			"class ${1}Model {",
			"  ${1}Model();",
			"}"
		],
		"description": "Riverpod NotifierProvider GVM + Model 기본 구조"
	},
	"Widget Named Function": {
		"prefix": "wf",
		"body": [
			"Widget ${1:NAME}() {",
			"  return SizedBox();",
			"}"
		],
		"description": "Widget 함수 기본 스니펫"
	},
	"StatelessWidget Template": {
		"prefix": "wc",
		"body": [
			"import 'package:flutter/material.dart';",
			"",
			"class ${1:MyWidget} extends StatelessWidget {",
			"  const ${1:MyWidget}({super.key});",
			"",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return ${2:Container()};",
			"  }",
			"}"
		],
		"description": "StatelessWidget 기본 템플릿"
	}
}