如何使用免费和公共的Rapid API并在flutter应用程序中调用API

Question

例如，我订阅了一个名为"；https://rapidapi.com/rapidapi/api/movie-database-imdb-alternative">

其java代码片段如下

OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder()
.url("https://movie-database-imdb-alternative.p.rapidapi.com/?s=Avengers%20Endgame&r=json&page=1")
.get()
.addHeader("x-rapidapi-host", "movie-database-imdb-alternative.p.rapidapi.com")
.addHeader("x-rapidapi-key", "my recieved API Key")
.build();
Response response = client.newCall(request).execute();

现在我的问题是如何在flutter应用程序和调用中使用？以及如果我想使用"呼叫"来显示电影名称，需要什么url和标题的详细信息；获取BY ID或标题"；

我的颤振代码如下

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

class APIService {
// API key
// Base API url
static const String _baseUrl = "https://movie-database-imdb-alternative.p.rapidapi.com/?s=Avengers%20Endgame&r=json&page=1";
// Base headers for Response url
static const Map<String, String> _headers = {
"x-rapidapi-key": "*****************",
"x-rapidapi-host": "movie-database-imdb-alternative.p.rapidapi.com",

};
// Base API request to get response
Future<dynamic> get() async {
Uri uri = Uri.https(_baseUrl,"");
final response = await http.get(uri, headers: _headers);
if (response.statusCode == 200) {
// If server returns an OK response, parse the JSON.
print("success");
return json.decode(response.body);
} else {
print("not success");
// If that response was not OK, throw an error.
throw Exception('Failed to load json data');
}
}
}

我想通过调用API ，在flutter应用程序中显示API的图像和文本

注：已订阅上述API，我已收到密钥等

Answer 1

以下是完整的示例。您必须伪造它才能放入实际的JSON查询结果：

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'API Call Demo',
theme: ThemeData(
primarySwatch: Colors.orange,
),
initialRoute: '/',
onGenerateRoute: (settings) => onGenerateRoute(settings),
onUnknownRoute: pageNotImplementedRoute,
);
}
Route? onGenerateRoute(RouteSettings settings) {
switch (settings.name) {
case '/':
return MaterialPageRoute(
builder: (context) => const MyHomePage(),
);
case '/api_page':
return MaterialPageRoute(
builder: (context) => const MyAPIPage(),
);
default:
return null;
}
}
Route pageNotImplementedRoute(RouteSettings settings) {
return MaterialPageRoute<void>(
settings: settings,
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Oops!'),
leading: IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
},
),
),
body: Center(
child: Text(
'Page Not Implemented',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headline6,
),
),
);
},
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Home Page"),
centerTitle: true,
),
body: Center(
child: ElevatedButton(
onPressed: () => Navigator.pushNamed(context, '/api_page'),
child: const Text("Call API"),
),
),
);
}
}
class MyAPIPage extends StatelessWidget {
const MyAPIPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("API Page"),
centerTitle: true,
leading: IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () => Navigator.pop(context),
),
),
body: _buildBody(),
);
}
Widget _buildBody() {
return FutureBuilder<MyData>(
future: APIService().get(),
builder: (context, snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return const Center(child: CircularProgressIndicator());
}
if (snapshot.hasError) {
return Center(child: Text(snapshot.error.toString()));
}
if (!snapshot.hasData) {
return const Center(child: Text("get() returns null!"));
}
final data = snapshot.data as MyData; // cast to MyData
return Container(
padding: const EdgeInsets.all(10),
color: Colors.grey,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text("Field1"),
Text(data.field1),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text("Field2"),
Text(data.field2),
],
),
],
),
);
},
);
}
}
class APIService {
static const _authority = "sameer-kumar-aztro-v1.p.rapidapi.com";
static const _path = "/";
static const _query = {"sign": "aquarius", "day": "today"};
static const Map<String, String> _headers = {
"x-rapidapi-key": "*****************",
"x-rapidapi-host": "sameer-kumar-aztro-v1.p.rapidapi.com",
};
// Base API request to get response
Future<MyData> get() async {
Uri uri = Uri.https(_authority, _path, _query);
final response = await http.get(uri, headers: _headers);
if (response.statusCode == HttpStatus.ok) {
// If server returns an OK response, parse the JSON.
final jsonMap = json.decode(response.body);
return MyData.fromJson(jsonMap);
} else {
// If that response was not OK, throw an error.
throw Exception('API call returned: ${response.statusCode} ${response.reasonPhrase}');
}
}
}
class MyData {
final String field1;
final String field2;
const MyData({
this.field1 = '',
this.field2 = '',
});
factory MyData.fromJson(Map<String, dynamic> json) => _$MyDataFromJson(json);
}
MyData _$MyDataFromJson(Map<String, dynamic> json) => MyData(
field1: json['field1'] as String? ?? '',
field2: json['field2'] as String? ?? '',
);

Answer 2

创建一个数据类，其中包含与返回的JSON对象对应的字段。如果不知道JSON字符串是什么，我就无法向您展示类的外观。

查看json_serializable包以帮助您创建类(比如MyData(和创建方法MyData.fromJson。

然后这样做：

final jsonMap = json.decode(response.body);
return MyData.fromJson(jsonMap);

返回的MyData对象将包含转换为Dart对象的JSON对象供您使用。

声明get()如下：

Future<MyData> get() async {
...
final jsonMap = json.decode(response.body);
return MyData.fromJson(jsonMap);
...
}

在你的页面小部件build()方法：

return FutureBuilder<MyData>(
future: get(),
builder: (context, snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return const Center(child: CircularProgressIndicator());
}
if (snapshot.hasError) {
return Center(child: Text(snapshot.error));
}
if (!snapshot.hasData) {
return Center(child: Text("get()returns null!"));
}
final data = snapshot.data as MyData; // cast to MyData
return Container(...); // use data in here
}
}