StateProviderでTextFormFieldの入力を検知する方法

ポイント

①TextFormFieldのonChangedを使う
②StateProviderを組み合わせる

コード

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

final _textProvider = StateProvider.autoDispose((ref) => '');

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const _Body(),
    );
  }
}

class _Body extends HookConsumerWidget {
  const _Body();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final textEditingController = useTextEditingController();
    final text = ref.watch(_textProvider);
    logger.w('_textProviderでwatchしているtext: $text');

    return Center(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          children: [
            const SizedBox(height: 100),
            _TextArea(textEditingController: textEditingController),
          ],
        ),
      ),
    );
  }
}

class _TextArea extends HookConsumerWidget {
  const _TextArea({required this.textEditingController});

  final TextEditingController textEditingController;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    const radius = 5.0;
    final textEditingController = useTextEditingController();

    return Container(
      height: 50,
      padding: const EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
        border: Border.all(width: 0.5),
        borderRadius: BorderRadius.circular(radius),
      ),
      alignment: Alignment.center,
      child: TextFormField(
        controller: textEditingController,
        onChanged: (String text) {
          ref.read(_textProvider.notifier).state = text;
          logger.i('TextFormFieldで入力されたtext: $text');
        },
        decoration: const InputDecoration(
          isCollapsed: true,
          border: InputBorder.none,
        ),
      ),
    );
  }
}

参考

[Flutter]TextFieldの変更を検知するための「onChanged方式」と「addListener方式」は何が違うのか – みんプロ式 – 初心者専門Flutterでスマホアプリプログラミング講座[Flutter]TextFieldの変更を検知するための「onChanged方式」と「addListener方式」は何が違うのか

関連記事