flutter riverpod 初歩歩の歩

自分用に書いたメモです。
間違っている部分やおかしな部分があったらコメントください！

パッケージ
・flutter_riverpod

pubspec.yaml

  flutter_riverpod: ^0.14.0+3  # ++

ViewModel

myViewModel.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; // ++

final myPovider = ChangeNotifierProvider(  // ++
  (ref) => MyViewModel(),                  // ++
);                                         // ++

// main.dartの数字をカウントするロジックを移動させることができる
class MyViewModel with ChangeNotifier {    // ++
  var _counter = 0;                        // ++
  int get counter => _counter;             // ++

  void incrementCounter() {                // ++
    _counter++;                            // ++
    notifyListeners();                     // ++
  }
}

Main

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; // ++

import 'my_view_model.dart';

void main() {
  runApp(ProviderScope( // ++
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'My Home Page'),
    );
  }
}

class MyHomePage extends ConsumerWidget {  // 変更
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  /** --- ここから --- **/
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  /** --- ここまで削除 --- **/

  @override 
  Widget build(BuildContext context, ScopedReader watch) { // 変更
    final _viewModel = watch(myProvider);  // ++
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              // 値を監視してくれるから自動で更新される。
              '${_viewModel.counter}',         // 変更
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // 監視が必要ない場合 => context.read()
        onPressed: context.read(myProvider).incrementCounter, // 変更
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}