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

前提

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

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

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

実現したいこと

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

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

エラーメッセージ

該当のソースコード

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

dart

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(表示するファイル)

dart

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