Question

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

Answer 1

void fetchData() async {
    final response =
        await get('https://www.redzoc.com/api/youtube/show/v2/get_trending.php?limit=50&offset=0');
    final imageModel = YourModelClass.fromJson(json.decode(response.body));
  }

安装http软件包-通过更新pubspec.yml文件
创建一个Model类以根据json响应创建对象。

Answer 2

在您的pubspec.yaml文件中，添加以下内容：

dependencies:
  flutter:
    sdk: flutter
  http: 0.12.0+1

在您的代码中：

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

const String url = 'https://www.redzoc.com/api/youtube/show/v2/get_trending.php?limit=50&offset=0';
final http.Request request = http.Request('GET', Uri.parse(url));
final http.StreamedResponse response = await http.Client().send(request);
final int statusCode = response.statusCode;
final String responseData =
  await response.stream.transform(utf8.decoder).join();
if(statusCode == 200) {
    print(responseData);
} else {
    print('error: code $statusCode');
}

Answer 3

您可以使用 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),
                              ),
                            ),
                          );
                        }
                      },
                    );
                  }

            }

如何在Flutter中调用API回调？

3 个答案: