OGP(メタデータ)を用いたwebサイト一覧アプリの実装

Question

前提・実現したいこと

複数のURLからメタデータを取得し、'タイトル'、'サムネ'、'概要'をまとめたwebサイト一覧を作りたい。
具体的には、ニュースアプリなどの記事一覧のイメージです。

現在、for文を用いてメタデータ取得と格納をURL毎に行いましたが、
メタデータ用のList内に要素が入っていないようで、アプリ上に何も表示されません。

for文がアプリ起動時に機能してないのだと予想していますが、
解決策がわからなかったので教えていただきたいです。

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

エラーメッセージはありません。

該当のソースコード

class articleListPanel extends StatelessWidget {
  articleListPanel(this._URL);
  final List<String> _URL;

  @override
  Widget build(BuildContext context) {
    ///個別での動作確認用
    //final watchMetadata = context.watch<MetadataModel>().fetchOgpFrom(_URL[0]);
    //Metadata _ogp = context.select((MetadataModel _model) => _model.ogp);
    ///OGP(Metadata)をList化して管理
    List<Metadata> _OGP = [];//←ここにメタデータまとめたい
    void setOgp () {
      for (var i = 0; i < _URL.length; i++) {
        final watchMetadata = context.watch<MetadataModel>().fetchOgpFrom(_URL[i]);
        Metadata _ogp = context.select((MetadataModel _model) => _model.ogp);
        _OGP.add(_ogp);
      }
    }

    return ListView.builder(
      itemCount: _OGP.length,
      itemBuilder: (context,n){
        return Container(
          height: 150,
          //color: Colors.green[200],
          child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Flexible(
                  child: Container(
                    width: double.maxFinite,
                    height: double.maxFinite,
                    margin: const EdgeInsets.all(2),
                    child: Text(
                      _OGP[n].title ?? "No title",style: const TextStyle(
                      fontWeight: FontWeight.bold,fontSize: 24),
                  ),),),
              ]
          ),
        );}       
      );
   
  }
}

Map<String, dynamic> _ogp = {
  "title": null,
  "image": null,
  "description":null,
};

class MetadataModel extends ChangeNotifier {
  Metadata ogp = Metadata.fromJson(_ogp);

  void fetchOgpFrom(String _url) async {
    final response = await http.get(Uri.parse(_url));
    final document = MetadataFetch.responseToDocument(response);
    ogp = MetadataParser.openGraph(document);
    notifyListeners();
  }
}

試したこと

メタデータ格納用のList"_OGP"を作成し、for文を用いて取得したメタデータを格納しました。
for文使わず、~.fetchOgpFrom(_URL[0])部の数字手入力した場合は機能します。

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

開発ツールのバージョン情報は以下になります。
Flutter 2.3.0-17.0.pre.225 • channel master • https://github.com/flutter/flutter.git
Tools • Dart 2.14.0 (build 2.14.0-182.0.dev)

Answer 1

bool _loading;
@override
void initState(){
super.initState();
_loading = true;　//ロード開始
_getOgpData();
}

_getOgpData() async{
await setOgp();
setState(() {
_loading = false;
});
}

非同期なのでこれを追加してみてはどうでしょうか
すみません間違い訂正しました。
var -> bool

Comments

[Daisan_gen]

ありがとうございます！
非同期処理についてはよくわかっていなかったので、提示していただいたコードをもとに色々調べながらやってみます！

[Daisan_gen]

リアクション遅くなってごめんなさい。

提示していただいたコードを組み込んでみましたが、リストが更新され続けるような状態になり、思った動きをしてもらえませんでした。（おそらく、setState()が常に更新され続けるプログラムになってしまった）

別の方法を調べてみたところ、親ウィジェットで下記のように記載することで想像した動作になりました。
ChangeNotifierProvider(create: (context) => MetadataModel(_URL)..fetchOgpFrom()

詳細は別途記載しますが、画面遷移する段階で情報の格納を終わらせるようにしました。
(元のコードは画面遷移した先で情報の格納を行おうとしていた)

setStateやinitStateについて勉強する良いきっかけになりました。ありがとうございます。

Answer 2

ArticleLists　クラスからURLを　MetadataModelクラスとarticleListPanelクラスに譲渡する。ChangeNotifierProviderでMetadataModelクラスをcreateする際に、'..メソッド()'を追加することで、画面が切り替わる際にメソッド処理を完了させる。（このときにfor文が回るようにした）　articleListPanelクラスでは、すでに完了したメソッドから要素を持ってくることで状態の更新が行われなくなり、記事一覧が更新され続けることは無くなった。

class ArticleLists extends StatelessWidget {
  //headerに表示される名前
  final String screenName = '記事一覧';

  //url一覧暫定
  final List<String> _URL = [
    /// 参考記事のURLを記載
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: Header(headerTitle: screenName),
        body: Scrollbar(
            child: ChangeNotifierProvider(
                create: (context) => MetadataModel(_URL)..fetchOgpFrom(),
                child: articleListPanel(_URL))
          ),
    );
  }
}

/// 画面遷移時にデータ格納を行う。
class MetadataModel extends ChangeNotifier {
  MetadataModel(this._url);
  final List<String> _url;

  List<Metadata> docs = []; //外部から参照するためのまとめ
  List<Metadata> _docs = []; // データ格納

  ///URL毎にdataの格納を行う。
  Future fetchOgpFrom() async {
    for (int i = 0; i< _url.length; i++) {
      final response = await http.get(Uri.parse(_url[i]));
      final document = MetadataFetch.responseToDocument(response);
      var ogp = MetadataParser.openGraph(document);
      this._docs.add(ogp);
    }
    this.docs = _docs;
    notifyListeners();
  }
}

import 'package:flutter/material.dart';
import 'package:list_view_ogp/model/commonaly/get_meta_data.dart';
import 'package:metadata_fetch/metadata_fetch.dart';
import 'package:provider/provider.dart';


class articleListPanel extends StatefulWidget {
  articleListPanel(this._URL);
  final List<String> _URL;

  @override
  State<articleListPanel> createState() => _articleListPanelState();
}

class _articleListPanelState extends State<articleListPanel> {
  List<Metadata> _UrlInfo =[];
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
          itemCount: widget._URL.length,
          itemBuilder: (context,n){
            return Builder(
              builder: (context) {
                final mydata = Provider.of<MetadataModel>(context);
                _UrlInfo = mydata.docs;
                final item = _UrlInfo[n];
                return Container(
                  height: 150,
                  child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Flexible(
                          child: Container(
                            width: double.maxFinite,
                            height: double.maxFinite,
                            margin: const EdgeInsets.all(2),
                            child: Text(
                              item.title
                                  ?? "No title",
                              style: const TextStyle(fontWeight: FontWeight.bold,fontSize: 24),
                            )
                          )
                        )
                      ]
                  ),
                );
              }
            );}
      );

  }
}