flutterの非同期処理の結果をwidgetに表示できない

Question

こちらの記事や，こちらに記事を見ながらAPIで取得した情報を表示させようとしたのですが画面に結果が表示されません。コピペしてそのままやってもダメでriverpodを１系に変えてもダメでした。

おそらく非同期処理で先にwidgetが更新されその後にhttp通信が行われているため表示されないのだと思われるのですが，どうすればいいのでしょうか？
view.dart

class _Articles extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(articleViewModel.notifier);
    final aState = ref.watch(articleViewModel.notifier).state;
    print(aState);

    return RefreshIndicator(
      onRefresh: () async {
        print(aState);
        await viewModel.refreshArticles();
      },
      child:
          ListView.builder(
        itemCount: aState.articles.length,
        itemBuilder: (context, int index) {
          if (index == (aState.articles.length - 1) && aState.hasNext) {
            viewModel.getArticles();
            return const LinearProgressIndicator();
          }
          return _articleItem(context, aState.articles[index]);
        },
      ),
    );
  }

  Widget _articleItem(context, article) {
    return GestureDetector(
      child: Container(
        padding: const EdgeInsets.all(15.0),
        decoration: const BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Color(0x1e333333),
              width: 1,
            ),
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _articleUser(article.user),
            const SizedBox(
              height: 10.0,
            ),
            Text(article.title),
            const SizedBox(
              height: 10.0,
            ),
            Wrap(
              spacing: 7.5,
              children: <Widget>[
                for (int i = 0; i < article.tags.length; i++)
                  _articleTag(article.tags[i])
              ],
            ),
            const SizedBox(
              height: 5.0,
            ),
            _articleCreatedAt(article.createdAt),
          ],
        ),
      ),
      onTap: () {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => ArticleDetailPage(
              article: article,
            ),
          ),
        );
      },
    );
  }

  Widget _articleUser(user) {
    final userId = user.id;
    return Row(
      children: [
        CircleAvatar(
          backgroundImage: NetworkImage(user.profileImageUrl),
          radius: 12.0,
          child: const Text(''),
        ),
        const SizedBox(width: 8.0),
        Text('@$userId'),
      ],
    );
  }

  Widget _articleTag(tag) {
    return GestureDetector(
      child: Text(
        tag['name'],
        style: const TextStyle(
          decoration: TextDecoration.underline,
        ),
      ),
      onTap: () {
        // ignore: avoid_print
        print(tag['name']);
      },
    );
  }

  Widget _articleCreatedAt(createdAt) {
    DateFormat format = DateFormat('yyyy-MM-dd');
    String date = format.format(DateTime.parse(createdAt).toLocal());

    return SizedBox(
      width: double.infinity,
      child: Text(
        '$dateに投稿',
        textAlign: TextAlign.right,
      ),
    );
  }
}

viewmodel.dart

final articleViewModel = StateNotifierProvider(
  (_) => ArticleViewModel(
    ArticleRepository(),
  ),
);

class ArticleViewModel extends StateNotifier<ArticlesState> {
  ArticleViewModel(this.repository) : super(const ArticlesState()) {
    getArticles();
  }

  final ArticleRepository repository;

  int _page = 1;
  bool _isLoading = false;

  Future<void> getArticles() async {
    if (_isLoading || !state.hasNext) {
      return;
    }

    _isLoading = true;

    final articles = await repository.fetchArticles(_page, state.keyword);
    // print(articles);
    final newArticles = [...state.articles, ...articles];
    // print(newArticles);

    if (articles.length % 20 != 0 || articles.length == 0) {
      state = state.copyWith(
        hasNext: false,
      );
    }

    state = state.copyWith(
      articles: newArticles,
    );
    // print(state);
    print(_isLoading);
    _page++;
    _isLoading = false;
    print(_isLoading);
  }

  Future<void> setQuery(String keyword) async {
    state = state.copyWith(
      articles: [],
      keyword: keyword,
      hasNext: true,
    );

    _page = 1;
  }

  Future<void> refreshArticles() async {
    state = state.copyWith(
      articles: [],
      hasNext: true,
    );

    _page = 1;

    getArticles();
  }
}

viewmodelのapiはprintで出力されていました

Comments

[y_waiwai]

コードを提示しよう
質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください