riverpodで定義した関数を使って表示する方法がわからない

前提

以前こちらで質問した内容の続きなのですが表示方法が分かりません。

手本コードは下記です。providerを使用しています。

dart

class BookListPage extends StatelessWidget { @override Widget build(BuildContext context) { return ChangeNotifierProvider<BookListModel>( create: (_) => BookListModel()..fetchBookList(), child: Scaffold( appBar: AppBar( title: Text('本一覧'), ), body: Center( child: Consumer<BookListModel>(builder: (context, model, child) { final List<Book>? books = model.books; if (books == null) { return CircularProgressIndicator(); } final List<Widget> widgets = books .map( (book) => ListTile( title: Text(book.title), subtitle: Text(book.author), ), ) .toList(); return ListView( children: widgets, ); }), ), floatingActionButton: Consumer<BookListModel>(builder: (context, model, child) { return FloatingActionButton( onPressed: () async { // 画面遷移 final bool? added = await Navigator.push( context, MaterialPageRoute( builder: (context) => AddBookPage(), fullscreenDialog: true, ), ); if (added != null && added) { final snackBar = SnackBar( backgroundColor: Colors.green, content: Text('本を追加しました'), ); ScaffoldMessenger.of(context).showSnackBar(snackBar); } model.fetchBookList(); }, tooltip: 'Increment', child: Icon(Icons.add), ); }), ), ); }}

上記をコピペしましたができませんでした。

実現したいこと

book.title
book.authorのように呼び出したいがどのようにすれば良いかわからないです。

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

エラーメッセージ

該当のソースコード

/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(); }}

viewファイル

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'; import '../domain/book.dart'; class BookListPage extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { final booksProvider = ref.watch(bookListProvider.notifier); final List<Book>? books = booksProvider.fetchBookList(); // これがエラー return Scaffold( appBar: AppBar( title: Text('本一覧'), ), body: Center( child: Text(books[0].title), ) floatingActionButton: FloatingActionButton( onPressed: null, tooltip: 'Increment', child: const Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); }}

試したこと

表示方法を調べていますが、[ChangeNotifier]を表示する方法が載っていないです。

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

flutter 3
flutter_riverpod: ^1.0.4