🐷
Flutterで開発初期に導入しておきたいこと
はじめに
個人的に導入必須な機能を備忘録を兼ねて記載しています。
これらは対応が遅れる程、導入するコストがかかってしまうものなので初期導入をおすすめします。
Null Safetyの導入
- Flutter 1系からの移行手順
-
flutter upgradeを実行し、Flutterを2系に更新する。 -
pubspec.yamlのenvironmentを修正。
pubspec.yaml
environment:
- sdk: '>=2.7.0 <3.0.0'
+ sdk: '>=2.12.0 <3.0.0'
-
flutter pub outdated --mode=null-safetyを実行し、使用しているPackageをNull safety対応のバージョンに更新します。
上記画像のResolvableのバージョンに更新します。
×マークが付いているものはNull safetyに対応していないので対応を待つか代替えできるパッケージを使用しましょう。
-
flutter pub getを実行するとNull safetyに対応していないファイルに警告が出ると思うので、そのファイルを修正してください。
※ Null safetyに移行するためのmigration toolがありますが、Nullチェックに多用していたassertなどは手動で削除する必要があるので個人的には手動で修正する方が早いと思っています。
静的解析の導入
Flutter 2.3.0でflutter_lintsが標準で使用できるようになるようなので
flutter_lintsを使用します。
- 導入手順
-
pubspec.yamlにflutter_lintsを追加。
pubspec.yaml
dev_dependencies:
flutter_lints: ^1.0.4
- ルート直下に
analysis_options.yamlを追加。
analysis_options.yaml
include: package:flutter_lints/flutter.yaml
linter:
rules:
# 追加したいルールを追記
多言語対応(l10n)の導入
- 導入手順
-
pubspec.yamlファイルにintlパッケージを追加します。
pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: ^0.17.0
- genarateフラグをtrueにします。
pubspec.yaml
flutter:
generate: true
- ルート直下に
l10n.yamlを追加。
l10n.yaml
arb-dir: lib/l10n
template-arb-file: app_ja.arb
output-localization-file: app_localizations.dart
-
lib配下にl10nディレクトリを追加して、対応するリソースファイルを作成します。
app_ja.arb
{
"helloWorld": "ハローワールド！"
}
- ここで
flutter pub getを実行すると.dart_tool/flutter_gen/gen_l10n配下にapp_localizations.dartが自動生成されます。
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
-
main.dartのMaterialAppでlocalizationsDelegates、supportedLocalesを追加します。
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'),
);
- これでリソースファイルに定義した文言を使用することができるようになります。
Text(AppLocalizations.of(context)!.helloWorld);
※ 日本語対応のみの場合も文言のリソース管理として使用するのをおすすめします。
参考資料
Discussion