🫶
【Flutter】ドットショートハンドで読みやすく
要約
Flutter 3.38（Dart 3.10）では、型が文脈から推論できる場合に、先頭ドット（.）から式を始めて 「Enum値」「静的メソッド」「コンストラクタ」へアクセスできる「ドットショートハンド」が使えます。
例えば MainAxisAlignment.start は「.start」と書けます。switch のcase文でも活躍し、コードがスッキリし、読みやすくなることが期待されます。
対象
Flutter 3.38以上のバージョンで開発している人、今後バージョンを上げようとしている人。
課題
FlutterのWidgetの引数にはEnumが多く、「mainAxisAlignment: MainAxisAlignment.center」のように冗長さがありました
ドットショートハンドの使い方
Enum
Enum名を省略して書くことができる
...
child: Column(
mainAxisAlignment: .center, // Enumの短縮(旧: MainAxisAlignment.center)
...
名前付きコンストラクタ・ファクトリ
クラス名を省略して書くことができる
...
Padding(
padding: .all(8.0), // 名前付きコンストラクタの短縮(旧: EdgeInsets.all(8.0))
...
デフォルトコンストラクタ
クラス名を省略し、「.new()」でコンストラクタを実行することができる
...
Text(
'$_counter',
locale: .new('ja'), // デフォルトコンストラクタの短縮(旧: Locale('ja'))
...
staticメソッド
クラス名を省略し、「double.parse()」を「.parse」と呼び出せる
...
child: Container(
width: .infinity, // Enumの短縮(旧: double.infinity)
height: .parse(
'100.0',
), // staticメソッドの短縮(旧: double.parse('100.0'))
...
ハマりどころ
型を推論できないと使えないので、名前付き引数の型が抽象クラスの時などは具象クラスの方を推論できない為使えない点は注意。といっても、基本的に使えないところはIDEが警告出してくれるはずです。
例えば、以下のような色を指定する場合です
...
child: const Icon(
Icons.add, // 引数が抽象クラスのIconData型のため、抽象クラスのIconsはドットショートハンド使用不可
),
...
まとめ
このように、随時更新されるのがFlutterを使っている楽しみでもあると思うので、今後もリリースノートを確認し、便利な仕様が出てきたら積極的に使ってみましょう
Discussion