質問編集履歴

コードを記入しました

2021/12/28 01:35

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -3,3 +3,389 @@
 おそらく非同期処理で先にwidgetが更新されその後にhttp通信が行われているため表示されないのだと思われるのですが，どうすればいいのでしょうか？
+view.dart
+```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
+```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で出力されていました