8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at
「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"を選択します。

スクリーンショット 2022-04-22 13.55.23.png

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

スクリーンショット 2022-04-22 13.57.55.png

開いた"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がある方は、上記コードの一番外側の波括弧{}は無視し、
中身だけを追記してください。

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

使い方

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

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

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

snippets_test2.gif

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

まとめと宣伝

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

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

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

8
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?