소개

이번에는 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('文字を変更'),
            ),
          ],
        ),
      ),
    );
  }
}

1. 우선은 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;
}

상태에 대한 Provider를 전역적으로 final로 정의합니다.
여기에서는 StateProvider를 사용합니다.
이번에는 sampleStr()의 반환값을 값으로 유지합니다. String 형으로 인수를 건네주고 있습니다. (처음에는 빈 문자)
StateProvider 는, 내부에 state_notifier 를 사용하고 있기 (위해)때문에, state 를 변경하는 것만으로 변경이 통지되도록 되어 있습니다.

sampleStr() 에는 TextField() 로 입력된 문자가 인수로서 건네받습니다.

사용해 본 소감

구현 자체는 매우 간단하고 사용하기 쉽다고 생각합니다.
아직 조금 만졌을 뿐입니다만 앞으로도 조금씩 이해를 깊게 해 나가고 싶다.