万年素人からHackerへの道

万年素人がHackerになれるまで殴り書きするぜ。

  • ・資産運用おすすめ
    10万円は1000円くらい利益
    資産運用ブログ アセマネ
    • ・寄付お願いします
      YENTEN:YYzNPzdsZWqr5THWAdMrKDj7GT8ietDc2W
      BitZenny:ZfpUbVya8MWQkjjGJMjA7P9pPkqaLnwPWH
      c0ban:8KG95GXdEquNpPW8xJAJf7nn5kbimQ5wj1
      Skycoin:KMqcn7x8REwwzMHPi9fV9fbNwdofYAWKRo

    freezedを使ってJSONのシリアライズ、Android Studioでのテンプレートの作り方もあるよ

    state_notifierに焦点をおいてて、肝心のテンプレート(Live Templates)の作り方が全く書いてない記事が多い。 これが日本語&macOSでは地球上で一番わかり易い記事。

    flutterの準備

    pubspec.yamlを開き以下の奴らを追加

    dependencies:
      freezed_annotation:
    dev_dependencies:
      json_serializable:
      build_runner:
      freezed:

    json_serializableは後のpart 'ファイル名.g.dart'に必要なので入れないとだめ。

    そしたら、flutter pub get なり flutter pub upgrade なり実行して入れておく。

    Live Templatesの設定 Windowsは知らんが、macOSでは、 まず「command+Shift+A」のショートカット。 ※AはActionのAと思われる

    これが出る。 f:id:shinriyo:20200615122017p:plain

    "Live Templates"を選ぶ。 そしたら「+」を押すぜ。 f:id:shinriyo:20200615122136p:plain

    こんな画面出る f:id:shinriyo:20200615122418p:plain そして、Abbreviationは「ffreezed」とかにする。 スクショは「freezed」だけどこれは任意。ショートカットになる。

    Descriptionは自分でわかる説明を書く。

    こいつをTemplate text:は この「freezedbuilt_valueの比較記事、Comparing freezed to built_valuehttps://itnext.io/comparing-freezed-to-built-value-3ff978c8647 から↓をパクって入れよう。

    import 'package:flutter/foundation.dart';
    import 'package:freezed_annotation/freezed_annotation.dart';
    part '$FILE_NAME$.freezed.dart';
    part '$FILE_NAME$.g.dart';
    @freezed
    abstract class $CLASS_NAME$ with _$$$CLASS_NAME$ {
      const factory $CLASS_NAME$({}) = _$CLASS_NAME$;
     
     factory $CLASS_NAME$.fromJson(Map<String, dynamic> json) => _$$$CLASS_NAME$FromJson(json);
    }

    1 Defineのところは Dartにした。 f:id:shinriyo:20200615122434p:plain

    2 Edit Variablesは先程の「Template text:」の変数 f:id:shinriyo:20200615122820p:plain

    $FILE_NAME$$CLASS_NAME$ をどう扱うかの設定。

    $FILE_NAME$fileNameWithoutExtension()にしておけばファイル名に準じる。 $CLASS_NAME$classNameComplete()にしたけど結局手動で書くから空っぽでいいと思う。

    自動生成する準備だぜ

    今回の例では、先程のパクリ元のAppInfoモデルを作るとする。 僕は、lib/models/app_info.dartみたいな場所にapp_info.dart作った。 場所はlib配下ならどこでもいいと思う。後の生成コマンドで勝手に探してくれるっぽい。

    そのファイルapp_info.dartにテンプレ(Live Templates)から自動で入れよう。 ffreezedって入れるとさっき自分で作ったのが出てくる。 ffって入れた瞬間に出てくる(ファイナルファンタジーファイナルファイトではない) f:id:shinriyo:20200615123347p:plain そしたら「Enter」を押せ!(マウスとか他のは触らないこと!)

    すると、まずココにフォーカスされる。 ファイル名を入れるのだが、さっきの設定のおかげで自動でファイル名を入れてくれてるので 「Enteer」を押せ。 f:id:shinriyo:20200615123515p:plain

    つぎは、クラス名を入れる。今回作りたいのはAppInfoなのでそれを入れる。 ※ココは自動にしたいけどapp_infoを検知して勝手にAppInfoクラスを入れる方法はわからない。コメントで教えてw f:id:shinriyo:20200615123625p:plain

    次重要!フィールド入れるベシ!

    さっきのでまだ完了ではない。 自分の使うフィールドを入れないとコマンドでコケる

    const factory AppInfo({}) = _AppInfo;

    こんな感じに入れる。

      const factory AppInfo({
        String buildNumber,
        String version,
        String appName,
        String packageId,
      }) = _AppInfo;

    Android Studioで赤くなるけどそれは一旦無視。まだファイルが生成されてないので一時的に怒られているのさ。

    自動生成するぜ

    コマンドで生成!

    flutter pub pub run build_runner build

    すると生成される。

    f:id:shinriyo:20200615124508p:plain

    lib/models/app_info.dart と同じ階層に、

    lib/models/app_info.freezed.dart
    lib/models/app_info.g.dart

    ができるぜ。