3
Help us understand the problem. What are the problem?

posted at

Organization

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

「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に関する技術記事を中心に投稿しています。
こちらも併せて読んでみてください!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
3
Help us understand the problem. What are the problem?