🐷

Flutterで開発初期に導入しておきたいこと

3 min read

はじめに

個人的に導入必須な機能を備忘録を兼ねて記載しています。
これらは対応が遅れる程、導入するコストがかかってしまうものなので初期導入をおすすめします。

Null Safetyの導入

Flutter 2.0.0以降では標準機能になっています。
Flutter 2.0.0以降でプロジェクトを作成した場合は不要です。

  • Flutter 1系からの移行手順
  1. flutter upgradeを実行し、Flutterを2系に更新する。

  2. pubspec.yamlenvironmentを修正。

pubspec.yaml
environment:
-  sdk: '>=2.7.0 <3.0.0'
+  sdk: '>=2.12.0 <3.0.0'
  1. flutter pub outdated --mode=null-safetyを実行し、使用しているPackageをNull safety対応のバージョンに更新します。

上記画像のResolvableのバージョンに更新します。
×マークが付いているものはNull safetyに対応していないので対応を待つか代替えできるパッケージを使用しましょう。

  1. flutter pub getを実行するとNull safetyに対応していないファイルに警告が出ると思うので、そのファイルを修正してください。

※ Null safetyに移行するためのmigration toolがありますが、Nullチェックに多用していたassertなどは手動で削除する必要があるので個人的には手動で修正する方が早いと思っています。

静的解析の導入

Flutter 2.3.0でflutter_lintsが標準で使用できるようになるようなので
flutter_lintsを使用します。

https://pub.dev/packages/flutter_lints
  • 導入手順
  1. pubspec.yamlflutter_lintsを追加。
pubspec.yaml
dev_dependencies:
  flutter_lints: ^1.0.4
  1. ルート直下にanalysis_options.yamlを追加。
analysis_options.yaml
include: package:flutter_lints/flutter.yaml

linter:
  rules:
    # 追加したいルールを追記

ルール一覧

多言語対応(l10n)の導入

この機能を使用するにはFlutter 1.22.0以降が必要です。

  • 導入手順
  1. pubspec.yamlファイルにintlパッケージを追加します。
pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0
  1. genarateフラグをtrueにします。
pubspec.yaml
flutter:
  generate: true
  1. ルート直下にl10n.yamlを追加。
l10n.yaml
arb-dir: lib/l10n
template-arb-file: app_ja.arb
output-localization-file: app_localizations.dart
  1. lib配下にl10nディレクトリを追加して、対応するリソースファイルを作成します。
app_ja.arb
{
  "helloWorld": "ハローワールド!"
}
  1. ここでflutter pub getを実行すると.dart_tool/flutter_gen/gen_l10n配下にapp_localizations.dartが自動生成されます。
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
  1. main.dartMaterialApplocalizationsDelegatessupportedLocalesを追加します。
main.dart
return MaterialApp(
  title: 'Flutter Demo',
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: MyHomePage(title: 'Flutter Demo Home Page'),
);
  1. これでリソースファイルに定義した文言を使用することができるようになります。
Text(AppLocalizations.of(context)!.helloWorld);

※ 日本語対応のみの場合も文言のリソース管理として使用するのをおすすめします。

参考資料

https://dart.dev/null-safety/migration-guide

https://flutter.dev/docs/release/breaking-changes/flutter-lints-package

https://flutter.dev/docs/development/accessibility-and-localization/internationalization