FutureBuilderを使っているときのProviderの書き方について

Question

Androidアプリにおいて保存されたURLからHTMLを解析してアイキャッチ画像とタイトルを取得する画面を作成しています。
取得中は読み込み中のインディケーターを表示させるため、FutureBuilderとProviderを使ってListViewを表示したいと考えています。

Providerを使わない場合は正しく表示されるのですが、リストから削除した時や新しく追加したときに読み込み直さないと表示が変わらないため、Providerを一緒に利用したいと考えており、対処方法がわかる方がいらっしゃいましたらヒントでもなんでも結構ですので教えていただけないでしょうか。

該当画面のコードは以下です。（一部不要な部分は省略）
Widget clipListAreaの前半、②のコードにすると正しく表示はされるのですが、①のようにProviderを使ってみたのですが、後述するエラーとなってしまいます・・
エラーについてはStackOverflowなど含め様々なサイトを見てみたのですが根本的な理解をしていないせいか、Builderで作り直したり、別のWidgetにしてもうまく行きませんでした・・。

class ClipList extends StatelessWidget {
  //変数などを宣言

  @override
  Widget build(BuildContext context) {
    return clipListArea(context);
  }
}


Widget clipListArea(context){
  return Container(
    child: FutureBuilder<List<PageData>>(
      //エラーになるコード・・・①
        future: Provider.of<ClipListModel>(context, listen: true).request(),

      // このコードにすると正しく表示される・・・②
      // future:ClipListModel().request(),
        builder: (ctx, dataSnapshot) {
          if (dataSnapshot.connectionState == ConnectionState.waiting) {
            // 非同期処理未完了 = 通信中
            return Center(
              child: CircularProgressIndicator(),
            );
          }

          if (dataSnapshot.error != null) {
            // エラー
            return Center(
                child: Text('エラーが発生しました。一度アプリを終了し再度起動してください')
            );
          }

          if(dataSnapshot.data.length==0){
            return Center(
              child:Text('データがありません')
            );
          }
          return clipListContents(dataSnapshot.data);

        }));
}



Widget clipListContents(List<PageData> cliplistdata) {
  return ListView.builder(
      physics: AlwaysScrollableScrollPhysics(),
      itemCount: cliplistdata.length,
      itemBuilder: (lctx, index) =>
      (
          Padding(
              padding: const EdgeInsets.only(right: 8.0, left: 8.0),
              child: InkWell(
                onTap: () {
                  Navigator.of(lctx).push(
                    //画面遷移
                      )
                  );
                },

                child: Row(
                    mainAxisAlignment: MainAxisAlignment
                        .spaceBetween,
                    children: <Widget>[
                      //アイキャッチ画像とタイトルを表示
                      ]
                    )
            ),
      )
}

①のコードにしたときのエラー内容

======== Exception caught by widgets library =======================================================
The following ProviderNotFoundException was thrown building ClipList(dirty):
Error: Could not find the correct Provider<ClipListModel> above this ClipList Widget

This happens because you used a BuildContext that does not include the provider
of your choice. There are a few common scenarios:

• You added a new provider in your main.dart and performed a hot-reload.
  To fix, perform a hot-restart.

• The provider you are trying to read is in a different route.

  Providers are "scoped". So if you insert of provider inside a route, then
  other routes will not be able to access that provider.

• You used a BuildContext that is an ancestor of the provider you are trying to read.

  Make sure that ClipList is under your MultiProvider/Provider<ClipListModel>.
  This usually happens when you are creating a provider and trying to read it immediately.

  For example, instead of:

  Widget build(BuildContext context) {
    return Provider<Example>(
      create: (_) => Example(),
      // Will throw a ProviderNotFoundError, because `context` is associated
      // to the widget that is the parent of `Provider<Example>`
      child: Text(context.watch<Example>()),
    ),
  }
  

  consider using builder like so:

  Widget build(BuildContext context) {
    return Provider<Example>(
      create: (_) => Example(),
      // we use `builder` to obtain a new `BuildContext` that has access to the provider
      builder: (context) {
        // No longer throws
        return Text(context.watch<Example>()),
      }
    ),
  }
  

If none of these solutions work, consider asking for help on StackOverflow:
https://stackoverflow.com/questions/tagged/flutter

The relevant error-causing widget was:
ClipList file:///Users/takeyama/AndroidStudioProjects/viewer/lib/main.dart:69:13
When the exception was thrown, this was the stack:
0 Provider._inheritedElementOf (package:provider/src/provider.dart:332:7)
1 Provider.of (package:provider/src/provider.dart:284:30)
2 clipListArea (package:viewer/Clip/cliplist.dart:106:26)
3 ClipList.build (package:viewer/Clip/cliplist.dart:156:12)
4 StatelessElement.build (package:flutter/src/widgets/framework.dart:4569:28)

====================================================================================================

ClipListModelは以下のようにしています。

class ClipListModel extends ChangeNotifier {
  List<String> cliplist = [];
  List<PageData> pagedataList = [];

  Future<List<PageData>> request() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    cliplist = //prefsから取得

    for (int i = 0; i < cliplist.length; i++) {
      PageData tmpPageData = new PageData();
      tmpPageData = await fetch(cliplist[i]);
      pagedataList.add(tmpPageData);
    }
    notifyListeners();
    return pagedataList;
  }

  Future<void> trash(deletePageData) async {
    if(pagedataList!= null){
      pagedataList.remove(deletePageData);
    }

    SharedPreferences prefs = await SharedPreferences.getInstance();
    cliplist = //prefsから取得
    cliplist.remove(deletePageData.url);
    //prefsにセット

    notifyListeners();
  }

  _validateUrl(String url) {
    if (url?.startsWith('http://') == true ||
        url?.startsWith('https://') == true) {
      return url;
    }
    else {
      return 'http://$url';
    }
  }

  Future<PageData> fetch(url) async {
      //引数urlからHTML要素を取得してPageDataの各プロパティにセット
  }

}

その他不足している情報などございましたらご指摘いただけますと幸いです。

Answer 1

以下のようにするとエラーは解消できました。

void main() {
  runApp(
      ChangeNotifierProvider<ClipListModel>(
          create: (context) => ClipListModel(),
          child:MyApp()
      ));
}