モバイルアプリ開発の現場では、iOSとAndroidの両方に対応する必要があるケースがほとんどです。Flutter 3.xはDart言語をベースとしたUIフレームワークで、単一のコードベースからiOS、Android、Web、デスクトップアプリを生成できます。私自身、過去3年間で複数のFlutterプロジェクトに携わってきましたが、バージョン3.xになって生産性が大幅に向上したと実感しています。
本記事では、Flutter 3.xの主要な機能と、実際のプロジェクトで使える実践的なテクニックを紹介します。これからFlutterを始める方にも、既存プロジェクトのアップグレードを検討している方にも役立つ内容です。
まずはFlutter 3.xの開発環境を整えましょう。Flutter SDKのインストール後、以下のコマンドでバージョンを確認します。
入会申込
ログインflutter --version
flutter doctorflutter doctorは環境の問題点を自動で検出してくれるため、セットアップ時には必ず実行してください。新規プロジェクトの作成は次のように行います。
flutter create --org com.example my_app
cd my_app
flutter runFlutter 3.xでは、Material 3がデフォルトで有効になっています。これにより、モダンなUIコンポーネントをすぐに活用できます。
Flutterアプリ開発で最も議論されるトピックの一つが状態管理です。Provider、BLoC、GetX、Riverpodなど様々な選択肢がありますが、Flutter 3.x時代にはRiverpodを強く推奨します。型安全性が高く、テストしやすい設計が大きな利点です。
// pubspec.yamlに追加
dependencies:
flutter_riverpod: ^2.4.0
riverpod_annotation: ^2.3.0
dev_dependencies:
riverpod_generator: ^2.3.0
build_runner: ^2.4.0Riverpodの基本的なプロバイダーの定義と使用例を見てみましょう。
// カウンターの状態を管理するNotifierプロバイダー
@riverpod
class Counter extends _$Counter {
@override
int build() => 0;
void increment() => state++;
void decrement() => state--;
}
// Widgetでの使用例
class CounterPage extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterProvider);
return Scaffold(
body: Center(child: Text('Count: $count')),
floatingActionButton: FloatingActionButton(
onPressed: () => ref.read(counterProvider.notifier).increment(),
child: const Icon(Icons.add),
),
);
}
}実務では、API通信を伴う非同期処理の状態管理が頻繁に発生します。RiverpodのAsyncNotifierを使えば、ローディング、エラー、成功の各状態を宣言的に管理できます。
クロスプラットフォーム開発では、スマートフォン、タブレット、デスクトップといった様々な画面サイズへの対応が不可欠です。Flutter 3.xではLayoutBuilderとMediaQueryを組み合わせてレスポンシブなUIを実現します。
class ResponsiveLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >= 1200) {
return DesktopLayout();
} else if (constraints.maxWidth >= 600) {
return TabletLayout();
} else {
return MobileLayout();
}
},
);
}
}私の経験では、ブレークポイントの定義をアプリ全体で統一することが重要です。プロジェクト初期にブレークポイントの定数クラスを作成しておくと、後々の保守が楽になります。
Flutter 3.xではImpellerレンダリングエンジンの導入により、描画パフォーマンスが大幅に向上しました。しかし、アプリケーション側での最適化も依然として重要です。以下のポイントを押さえておきましょう。
ListView.builderを使って遅延構築するcached_network_imageパッケージで画像のキャッシュを適切に管理する// 悪い例：毎回新しいインスタンスが生成される
Container(
padding: EdgeInsets.all(16.0),
child: Text('Hello'),
)
// 良い例：constで再利用される
const Padding(
padding: EdgeInsets.all(16.0),
child: Text('Hello'),
)実務でFlutterプロジェクトを成功させるには、テスト戦略が欠かせません。Flutterは単体テスト、Widgetテスト、統合テストの3層構成を標準でサポートしています。
// Widgetテストの例
testWidgets('Counter increments', (tester) async {
await tester.pumpWidget(
const ProviderScope(child: MyApp()),
);
expect(find.text('0'), findsOneWidget);
await tester.tap(find.byIcon(Icons.add));
await tester.pump();
expect(find.text('1'), findsOneWidget);
});私のチームでは、ビジネスロジックの単体テストカバレッジ80%以上、重要なユーザーフローの統合テストを必須としています。CI/CDパイプラインにテストを組み込むことで、リリース前の品質担保を自動化しています。
Flutter 3.xはクロスプラットフォーム開発のための強力なフレームワークです。Riverpodによる堅牢な状態管理、レスポンシブデザイン、パフォーマンス最適化、そしてテスト戦略を組み合わせることで、高品質なアプリケーションを効率的に構築できます。まずは小規模なプロジェクトで試し、徐々に本格的なプロダクションアプリに適用していくことをおすすめします。
