【Flutter】Freezedについて理解の幅を広げる

こちらの記事を読んでからのほうが楽しめます。

textfieldを便利にする方法を考える

Freezedパッケージを使用して、FlutterのTextFieldの入力管理を改善する一例として、テキスト入力の各状態を管理するTextFieldStateを作成しましょう。

まず、以下のようにTextFieldStateを定義します。

import 'package:freezed_annotation/freezed_annotation.dart';

part 'text_field_state.freezed.dart';

@freezed
class TextFieldState with _$TextFieldState {
  const factory TextFieldState({
    @Default('') String text,
    @Default(false) bool isComposing,
  }) = _TextFieldState;
}

ここで、textはTextFieldの現在のテキストを表し、isComposingはユーザーが現在テキストを入力中かどうかを表します。

そして、StatefulWidgetでテキストフィールドを管理し、状態を更新するためのロジックを追加します。

import 'package:flutter/material.dart';

class TextFieldWithState extends StatefulWidget {
  const TextFieldWithState({Key? key}) : super(key: key);

  @override
  _TextFieldWithStateState createState() => _TextFieldWithStateState();
}

class _TextFieldWithStateState extends State<TextFieldWithState> {
  TextFieldState _state = TextFieldState();

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: (String text) {
        setState(() {
          _state = _state.copyWith(text: text, isComposing: text.isNotEmpty);
        });
      },
      onSubmitted: (_) {
        setState(() {
          _state = _state.copyWith(isComposing: false);
        });
      },
    );
  }
}

このようにすることで、TextFieldの状態が更新されるたびに_stateが更新され、その情報を元にUIの更新や別の処理を行うことができます。

例えば、ユーザーが何かテキストを入力している場合にのみ送信ボタンを有効にするといった場合には、以下のように_state.isComposingを利用します。

RaisedButton(
  onPressed: _state.isComposing ? _onSubmit : null,
  child: const Text('Submit'),
),

ここで、_onSubmitは実際の送信処理を行う関数を表しています。

このように、Freezedを使用することで、状態管理をより明確に、そして安全に行うことができます。