Fleezedを使ったFlutterアプリ開発: シンプルなカウンターアプリの作成

Flutter開発者の皆さん、不変なデータクラスの生成や状態管理に悩んだことはありませんか？そんな時におすすめなのが、Fleezedパッケージです。この記事では、Fleezedを使用してシンプルなカウンターアプリを作成する方法を紹介します。

Fleezedとは？

Fleezedは、Flutterで不変なデータクラスを簡単に生成するためのパッケージです。不変性の保証、データのコピー、シリアライズとデシリアライズなどの一般的なタスクを容易にします。

カウンターアプリの作成手順

1. 依存関係の追加

まず、pubspec.yamlファイルにFleezedと関連パッケージを追加します。

dependencies:
  flutter:
    sdk: flutter
  freezed_annotation: ^0.14.3

dev_dependencies:
  build_runner: ^2.1.4
  freezed: ^0.14.3

2. 状態クラスの定義

カウンターの状態を表すクラスをFleezedで定義します。

@freezed
class CounterState with _$CounterState {
  const factory CounterState({required int count}) = _CounterState;
}

3. コードの生成

コマンドラインでコード生成を行います。

flutter pub run build_runner build

4. ウィジェットの作成

カウンターのウィジェットを作成し、カウントの増減と表示を行います。

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  CounterState _counterState = CounterState(count: 0);

  void _incrementCounter() {
    setState(() {
      _counterState = _counterState.copyWith(count: _counterState.count + 1);
    });
  }

  void _decrementCounter() {
    setState(() {
      _counterState = _counterState.copyWith(count: _counterState.count - 1);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Counter Value: ${_counterState.count}'),
            ElevatedButton(onPressed: _incrementCounter, child: Text('Increment')),
            ElevatedButton(onPressed: _decrementCounter, child: Text('Decrement')),
          ],
        ),
      ),
    );
  }
}

5. メイン関数の作成

最後に、メイン関数を作成してアプリを実行します。

void main() {
  runApp(MaterialApp(
    home: CounterWidget(),
  ));
}

まとめ

Fleezedを使用すると、Flutterでの不変なデータクラスの生成や状態管理が非常に簡単になります。この記事で紹介したカウンターアプリの例を通して、Fleezedの基本的な使用方法を学びました。

ぜひお試しください！