📱

flutter + hooksriverpod を分割して動かす

2022/09/15に公開

Flutter

Android Studio

Dart

tech

みなさんこんにちは

hooks_riverpodパッケージの導入

Android Studioのターミナルからhooks_riverpodを導入します。

hooksriverpodsample % flutter pub add hooks_riverpod
hooksriverpodsample % flutter pub get hooks_riverpod

公式のサンプル

素人なので、プロのソースを参考にします。

一応、データと、View部分のソースは分けていこうと思います。

ディレクトリ構成

ソース

以下にも格納

main.dart

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'view/myhome.dart';

//ここが一番最初に動く
void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

myhome.dart

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

import '../entity/data.dart';

class MyHomePage extends HookConsumerWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Riverpod counter example'),
      ),
      body: Center(
        child: Text(
          '$count',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        //ここでentityのincrement()関数を実行して、＋１しています。
        onPressed: () => ref.read(counterProvider.notifier).increment(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

data.dart

//hooks_riverpodを利用するための宣言
import 'package:hooks_riverpod/hooks_riverpod.dart';

//Providerの宣言
final counterProvider = StateNotifierProvider<Counter, int>((_) => Counter());

//Providerに紐づいたクラスと関数
class Counter extends StateNotifier<int> {
  Counter() : super(0);//stateを０で初期化

  //increment()関数が呼ばれたら、stateの数字を＋1する。
  void increment() => state++;
}

ちょっと動かしてみましょう

動いているようです。

今回の課題

今の所、良さが皆目わかりません。
Githubにソースを登録してみました。覚え書きレベルなので、需要は微妙ですが。ソースの分け方とかが参考になればいいなと。

今後の予定

このサンプルだと、数字を追加するだけです。
通常カウンターというと、クリアも出来るんじゃないかなと。

あとはですね、ちょっと前にMAC買ったのですよ。長年 Windows利用してたので、ショートカットキーなどが全然違うので、今のところ私というシステムの性能が落ちています。
更新が遅れた理由は、純粋にプライベートが忙しくなったってとこでしょうか。