riverpodで状態管理をしているがエラーになる

Question

前提

本一覧を取得するアプリを作っています。
本一覧はfirebaseから取得しています。

YouTubeを参考に状態管理をしたいと思ったのですがriverpodでやる方法がいまいちよくわかりません。
・参考にしているYouTube
・参考にしたサイト

記述やエラーなどは下部に記載します。

実現したいこと

riverpodを使った状態管理をしたい。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

lib/model/（状態管理ファイル）

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

import '../domain/book.dart';

final bookListProvider = ChangeNotifierProvider<BookListModel>((ref) {
  return BookListModel();
});

class BookListModel extends ChangeNotifier {
  final Stream<QuerySnapshot> _userStream =
      FirebaseFirestore.instance.collection('books').snapshots();

  // booksという配列を作成 null許容
  List<Book>? books;

  void fetchBookList() async {
    final QuerySnapshot snapshot =
        await FirebaseFirestore.instance.collection('books').get();

    final List<Book> books = snapshot.docs.map((DocumentSnapshot document) {
      Map<String, dynamic> data = document.data() as Map<String, dynamic>;

      final String title = data['title'];
      final String author = data['author'];

      return Book(title, author);
    }).toList();

    this.books = books;
    notifyListeners();
  }
}

lib/book_list_page(表示するファイル)

import 'package:book_list_project/book_list/book_list_model.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';


class BookListPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {

    final bookListProvider = ref.read(bookListProvider); // ここでエラー

    return Scaffold(
      appBar: AppBar(
        title: Text('本一覧'),
      ),
      body: Center(child: ),
      floatingActionButton: FloatingActionButton(
        onPressed: null,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

試したこと

riverpodに関しての記事は見ているのですが、別ファイルで管理しているものがなく、参考になりません。
エラー内容では見つからない？という感じでしたがなぜでしょうか。

補足情報（FW/ツールのバージョンなど）

mac
vscode

flutter 3
flutter_riverpod: ^1.0.4

Answer 1

final bookListProvider = ref.read(bookListProvider);のローカル変数名をbookListProvider から違う名前に変えればエラーが解消されませんか。
bookListProviderはグローバル変数で宣言されていますが、ローカル変数名としても定義されてしまっているため、{}ブロック内ではローカル変数名をref.readの引数として使用したとして認識されエラーが出ています。

以下がエラーメッセージの内容で、下側が日本語訳です。

local variable 'bookListProvider' can't be referenced before it is declared.
ローカル変数 'bookListProvider' は宣言される前に参照することはできません。

エラーの詳細は以下のページを参考にしてください。
https://dart.dev/tools/diagnostic-messages#referenced_before_declaration

あとref.readを使ってますが、そこは多分ref.watchを使うのが一般的かな。
プロバイダの変更をウォッチして、変更があればウィジェットのリビルドを起こすには。