flutter - 如何在 Flutter 中调用 API 回调？

Question

我在 Flutter 中比较新鲜。这是我第一次在 Dart 中实现 API 调用。我需要使用回调编写 API 调用。我没有编程背景，所以请帮我写一下。我在下面添加了一个链接，我需要列出标题并添加一个点击监听器。请帮我。

基本网址：在此处输入链接描述

标签： flutterdartcallback

Answer 1

您可以使用futurebuilder来调用 api。在这里，我已经完整地演示了如何使用loader和update view调用api。

 dependencies:
  flutter:
    sdk: flutter
  http: "^0.12.0"

添加依赖项后导入它

  import 'package:http/http.dart' as http;


         class Home extends StatelessWidget {
             @override
              Widget build(BuildContext context) {
                // TODO: implement build
                return Scaffold(
                body: ListView(
                 children:[
                   updateTopratedMovie(context),
              ]
                ),
                );

              }


              Future<dynamic> getTopratedMovie() async {
                    String url =
                        'https://api.themoviedb.org/3/movie/top_rated';
                    http.Response response = await http.get(url);
                    return json.decode(response.body);
                  }

                  Widget updateTopratedMovie(context) {
                    return FutureBuilder(
                      future: getTopratedMovie(),
                      builder: (BuildContext context, AsyncSnapshot snapshot) {
                        if (snapshot.hasData) {
                          if (snapshot.data != null) {
                            dynamic content = snapshot.data;
                            return SizedBox(
                              height: 500.0,
                              child: Padding(
                                padding: const EdgeInsets.symmetric(horizontal: 0.0),
                                child: Container(
                                  // elevation: 2.0,
                                  child: ListView.builder(
                                      // scrollDirection: Axis.horizontal,
                                      itemCount: content['results'].length,
                                      itemBuilder: (context, i) =>
                                         Container(
                                             height:100.0,
                                             color:Colors.red
                                             child:Text(i);
                                                   ),
                                ),
                              ),
                            );
                          }
                        } else {
                          return Container(
                            height: 120.0,
                            width: MediaQuery.of(context).size.width,
                            child: Center(
                              child: CircularProgressIndicator(
                                backgroundColor: Color(0xff00d2ff),
                              ),
                            ),
                          );
                        }
                      },
                    );
                  }

            }