新規Flutter Project main.dart書き換え用 VSCode向け Snippet (スニペット) #VSCode

「Flutter プロジェクト立ち上げた際のmain.dartの書き換えがめんどくさい！」

そう思われる方、多いかと思います。

この問題を解決するため、VSCode使用者向けにSnippet（スニペット）を作成しました。

本記事ではこれの紹介を行います。

要点

作成したSnippets

dart.json

{
	"New Flutter Project": {
		"prefix": "New Flutter Project",
		"body": [
			"import 'package:flutter/material.dart';",
			"",
			"void main() {",
			"  runApp(const MyApp());",
			"}",
			"",
			"class MyApp extends StatelessWidget {",
			"  const MyApp({Key? key}) : super(key: key);",
			"",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return const MaterialApp(",
			"      home: MyWidget(),",
			"    );",
			"  }",
			"}",
			"",
			"class MyWidget extends StatelessWidget {",
			"  const MyWidget({Key? key}) : super(key: key);",
			"",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return Container();",
			"  }",
			"}",
			"",
		],
		"description": "New Flutter Project"
	}
}

実行結果

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

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

導入方法

導入方法を詳細に解説していきます。

VSCode を開き、　[ ⌘　+ Shift + P ] (Windowsの場合は [Ctrl + Shift + P]) を押します。

コマンドパレットが開かれるので、「snippets」と入力し、"Configure User Snippets"を選択します。

どのSnippets設定ファイルを開くか問われるので、「dart」と入力し、"dart.json"を開きます。

開いた"dart.json"ファイルに、以下のSnippets(再掲)をコピペすれば導入完了です。

dart.json

{
	"New Flutter Project": {
		"prefix": "New Flutter Project",
		"body": [
			"import 'package:flutter/material.dart';",
			"",
			"void main() {",
			"  runApp(const MyApp());",
			"}",
			"",
			"class MyApp extends StatelessWidget {",
			"  const MyApp({Key? key}) : super(key: key);",
			"",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return const MaterialApp(",
			"      home: MyWidget(),",
			"    );",
			"  }",
			"}",
			"",
			"class MyWidget extends StatelessWidget {",
			"  const MyWidget({Key? key}) : super(key: key);",
			"",
			"  @override",
			"  Widget build(BuildContext context) {",
			"    return Container();",
			"  }",
			"}",
			"",
		],
		"description": "New Flutter Project"
	}
}

既に設定しているSnippetsがある方は、上記コードの一番外側の波括弧{}は無視し、
中身だけを追記してください。

以上が導入方法となります。

使い方

flutter create ~で作成したプロジェクトの"main.dart"ファイルをVSCodeで開いてください。
[⌘ + A] (Windows の場合は[Ctrl + A])で全選択し、「new」と入力してください。
"New Flutter Project"を選択すれば、Snippetsで設定したコードに書き換わります。

とても簡単に書き換えられました！
コメントを削除したり、カウンターアプリのStatefulWidgetを削除したりの手間が省けますね！

まとめと宣伝

Flutter プロジェクトを新規で立ち上げた際の、main.dart の書き換え方として、
Snippetsを導入して書き換える方法を紹介しました。

Flutter プロジェクトを立ち上げる回数の多い方は、このSnippetsでかなり楽ができるかと思います。
ぜひ使って見てください！

週刊Flutter大学というブログにて記事を投稿しています。
前週に紹介されたFlutterに関する情報をまとめた、Flutterニュース、という記事や、
Flutterに関する技術記事を中心に投稿しています。
こちらも併せて読んでみてください！