riverpodを使ってインプットフォームに入力した文字を表示させてみた

はじめに

今回はriverpodがとても便利という話をよく聞くのでflutter初心者ながらも少し触ってみました
パッケージはhooks_riverpodを使用しました。

やりたいこと

TextField()に入力した文字をriverpodを使って変更を監視してText()に表示していきます

ソースコード

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:startup_namer/main_model.dart';
void main() {
  runApp(ProviderScope(child: MyApp())); // *1
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.white),
      home: _FirstView(),
    );
  }
}

class _FirstView extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final String sampleText = useProvider(sampleProvider).state; // *2
    String text = ''; //inputした文字を代入
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Maps App'),
      ),
      body: Center(
        child: Column(
          children: [
            Text(sampleText),
            TextField(
              enabled: true,
              style: TextStyle(color: Colors.red),
              obscureText: false,
              maxLines: 1,
              onChanged: (input) {
                text = input;
              },
            ),
            ElevatedButton(
              onPressed: () {
                context.read(sampleProvider).state = sampleStr(text); // *3
              },
              child: Text('文字を変更'),
            ),
          ],
        ),
      ),
    );
  }
}

１. まずはWidgetツリー上でProviderを利用するために根本のMyApp()をProviderScope()で包みます。
2. useProviderを使ってsampleProviderの値を取得します。
useProviderを使用するWidgetはHookWidget を継承している必要があります。
useProvider を使ってアクセスすることで、状態の変更通知がされた時にリビルドされるようになります。
今回はTextFieldで入力した文字を変数textに代入します。
3. onpressed()の中でsampleProviderの値を更新します。更新にはcontext.read()を使います。
引数として先ほど宣言した変数textを渡します。

mainModel.dart

import 'package:hooks_riverpod/hooks_riverpod.dart';

final sampleProvider = StateProvider((ref) => sampleStr('')); // #4

String sampleStr(String text) { //*5
  return text;
}

1. 状態の入れ物としての Provider を、グローバルに final で定義します。
   ここでは、StateProvider を使います。
   今回はsampleStr()の返り値を値として保持します。String型で引数を渡してます。（最初は空文字）
   StateProvider は、内部に state_notifier を使っているため、state を変更するだけで変更が通知されるようになっています。

2. sampleStr()にはTextField()で入力された文字が引数として渡されます。

使ってみた感想

実装自体はとても簡単で使いやすいと思います。
まだまだ少し触っただけですが今後も少しずつ理解を深めていきたい。