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


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

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

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

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

## 要点

### 作成したSnippets

```json: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"
	}
}
```

### 実行結果

```dart: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"を選択します。

![スクリーンショット 2022-04-22 13.55.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694109/4c762de8-f25f-78de-c82f-3ef6ab93d7f1.png)

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

![スクリーンショット 2022-04-22 13.57.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694109/3f04f0b4-4c62-5459-3181-79cbae31adbb.png)

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

```json: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"
	}
}
```

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

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

## 使い方

1. ``flutter create ~``で作成したプロジェクトの"main.dart"ファイルをVSCodeで開いてください。

2. [⌘ + A] (Windows の場合は[Ctrl + A])で全選択し、「new」と入力してください。

3. "New Flutter Project"を選択すれば、Snippetsで設定したコードに書き換わります。


![snippets_test2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694109/f956de7a-5815-aeab-9414-02561b9e951b.gif)

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

## まとめと宣伝

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

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

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

https://blog.flutteruniv.com/