Flutterのテンプレートをスニペット・LiveTemplateに設定しよう

プロジェクトを立ち上げていちいちコードを書くのがめんどくさい

最近会社の方針でFlutterの学習を始めたのですが、勉強の際何度も新規プロジェクトを立ち上げます。

その度「class！」「extends！」「StatelessWidget！」と書くのがめんどくさいし時間の無駄なので、テンプレートをここに記載しておきます。

これをAndroidStudioのLiveTemplateに設定しておけばコードを爆速で書けるようになります！

import 'package:flutter/material.dart';
void main() {
  runApp($CLASS$());
}
class $CLASS$ extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "$TITLE$",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: $STATE$(),
    );
  }
}

class $STATE$ extends StatefulWidget {
  @override
  _$STATE$State createState() => _$STATE$State();
}

class _$STATE$State extends State<$STATE$> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text($TITLE$),
      ),
      body: PageView(),
    );
  }
}

自分は「start」と打ち込むとこのコードが出るよう設定しました。

開発の速度が爆上がりしたらいいなあ…。

AndroidStudioのPreference→Live TemplatesのFlutterの中に追加して、追加したものを右クリック→Change ContextでDartにチェックを入れてあげれば使えるようになるはず！

VSCodeの場合はdart.jsonにこれを書き込んでください！

"Start":{
        "prefix":"start",
        "body":[
            "import 'package:flutter/material.dart';"

            "void main() {"
                "\trunApp(MyApp());"
            "}"

            "class MyApp extends StatelessWidget {"
                "\t@override"
                "\tWidget build(BuildContext context) {"
                    "\t\treturn MaterialApp("
                        "\t\t\tdebugShowCheckedModeBanner: false,"
                        "\t\t\ttitle: '$2',"
                        "\t\t\ttheme: ThemeData("
                        "\t\t\t\tprimarySwatch: Colors.blue,"
                        "\t\t\t),"
                        "\t\t\thome: $1(),"
                    "\t\t);"
                "\t}"
            "}"

            "class $1 extends StatefulWidget {"
                "\t@override"
                "\t_$1State createState() => _$1State();"
            "}"

            "class _$1State extends State<$1> {"
                "\t@override"
                "\tWidget build(BuildContext context) {"
                    "\t\treturn Scaffold("
                        "\t\t\tappBar: AppBar("
                            "\t\t\t\ttitle: Text("
                            "\t\t\t\t\t'$2'"
                            "\t\t\t\t),"
                        "\t\t\t),"
                        "\t\t\tbody: PageView(),"
                    "\t\t);"
                "\t}"
            "}"
        ],
    "description": "最初に使うといい"
    }

他にも役に立ちそうなスニペットを書いておきます！

"Class":{
        "prefix":"class",
        "body":[
            "import 'package:flutter/material.dart';"
            ""
            "class $1 extends $2 {"
            "}"
        ],
    "description": "クラス"
    }

    "Icons":{
        "prefix":"icons",
        "body":[
            "Icon(Icons.$1)"
        ],
    "description": "アイコンを出す"
    }

    "Text":{
        "prefix":"text",
        "body":[
            "Text('$1')"
        ],
    "description": "文字を打つ"
    }

    "Navigate":{
        "prefix":"navigate",
        "body":[
            "Navigator.of(context).push("
                "MaterialPageRoute(builder: (context) {"
                    "return $1();"
                "}),"
            ");"
        ],
    "description": "画面遷移"
    }

    "Back":{
        "prefix":"back",
        "body":[
            "Navigator.of(context).pop();"
        ],
    "description": "前の画面に戻る"
    }

情報求む！

実はまだFlutterを勉強して1週間も経っていないど素人です。

素人目線で早く書けるよう工夫しただけですので、詳しい方がいたらもっと良いスニペットの書き方を教えてください！