Flutter как вызвать несколько API (с futurebuilders) на одном экране?

#wordpress #flutter #http #rest #flutter-futurebuilder

#wordpress #flutter #http #остальное #flutter-futurebuilder

Вопрос:

Я создаю домашнюю страницу с помощью rest api и использую http-библиотеку. Я могу получать последние сообщения из моего вызова api. Но я создаю домашнюю страницу, и поэтому мне нужно показать больше данных из моего rest api. Использование WordPress в качестве серверной части. Я хочу получить 5 сообщений из 3-4 категорий, чтобы домашняя страница заполнилась содержимым.

Вот мой код :

 class HomePage extends StatelessWidget {
  static const routeName = 'homepage';

  final WpPostService wpPostService = WpPostService();

  // final WpGhazalService wpGhazalService = WpGhazalService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('welcome to LilwaQamar'),
      ),
      body: Container(
        child: Column(
          children: [
            Container(
              child: FutureBuilder(
                  future: wpPostService.getPosts(),
                  builder: (BuildContext context,
                      AsyncSnapshot<List<Post>> snapshot) {
                    if (snapshot.hasData) {
                      List<Post> posts = snapshot.data;
                      return ListView(
                        children: posts
                            .map((Post post) => Card(
                                  elevation: 6,
                                  margin: EdgeInsets.all(10.0),
                                  child: ListTile(
                                    title: Html(
                                      data: post.title.rendered,
                                      defaultTextStyle: GoogleFonts.lato(
                                        textStyle: TextStyle(
                                            color: Colors.black,
                                            letterSpacing: .5,
                                            fontSize: 19),
                                      ),
                                    ),
                                    subtitle: Html(
                                      data: post.content.rendered
                                              .substring(0, 73)  
                                          '..',
                                      defaultTextStyle: GoogleFonts.lato(
                                        textStyle: TextStyle(
                                            color: Colors.black54,
                                            letterSpacing: .5,
                                            fontSize: 16),
                                      ),
                                    ),
                                    onTap: () {
                                      Navigator.push(
                                        context,
                                        MaterialPageRoute(
                                          builder: (context) => PostDetaislPage(
                                            post: post,
                                          ),
                                        ),
                                      );
                                    },
                                  ),
                                ))
                            .toList(),
                      );
                    }
                    return Center(child: CircularProgressIndicator());
                  }),
            ),
            Container(
              child: Text("Ghazals"),
            ),
          ],
        ),
      ),
    );
  }
}
  

Я могу получать данные из последних сообщений. Но у меня есть еще несколько вызовов api, таких как сообщения из category / 1, category / 2 и т.д. Как я могу получать сообщения из нескольких категорий? Или как я могу вызвать несколько futurebuilders на одном экране? Надеюсь, вы поняли мой вопрос.

Комментарии:

1. это зависит от пользовательского интерфейса, в котором вы хотите разместить эти виджеты. Сначала подумайте, должен ли это быть непрерывный длинный список с разными цветными списками, представляющими категории? должен ли он содержать панель вкладок или нижнюю панель?

2. ДА. Я хочу просто список сообщений. Всего 5 сообщений. Я могу звонить напрямую в api для 5 сообщений, но я застрял при вызове несколько раз.

Ответ №1:

Посмотрите видео для нескольких вызовов API

  fetchData() async {
  var responses = await Future.wait([
    http.get(firstAPI), // make sure return type of these functions as Future.
    http.get(secondAPI),
  ]);
 var response1 = responses.first;
 var response2 =  responses[1];
}
  

Комментарии:

1. Я думаю, это то, что я искал. Я отказался от проекта из-за этой проблемы. Спасибо за помощь.