Flutter网络请求插件retrofit_flutter的使用
Flutter网络请求插件retrofit_flutter的使用
获取开始
本项目是一个新的Dart包项目,用于创建可以跨多个Flutter或Dart项目的库模块。
对于如何开始使用Flutter,你可以查看我们的在线文档,其中包含教程、示例、移动开发指南和完整的API引用。
示例代码
以下是使用retrofit_flutter
插件进行网络请求的完整示例:
import 'package:flutter/material.dart';
import 'api_helper.dart'; // 导入API帮助类
void main() {
runApp(MyApp()); // 运行应用
}
class MyApp extends StatelessWidget {
// 应用根组件
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
var _weather = '空白'; // 初始天气信息为空白
void _incrementCounter() {
setState(() {
_counter++; // 按钮点击计数器增加
});
}
[@override](/user/override)
void initState() {
super.initState();
ApiHelper().get15DaysWeatherByArea('101010100').then((value) {
setState(() {
_weather = value.toString(); // 获取天气数据并更新UI
});
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title), // 设置标题
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('你已经按了按钮这么多次:'),
Text('$_counter', style: Theme.of(context).textTheme.headline4),
Text('$_weather') // 显示获取到的天气信息
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: '增加',
child: Icon(Icons.add),
),
);
}
}
更多关于Flutter网络请求插件retrofit_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter网络请求插件retrofit_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
retrofit_flutter
是一个基于 Dio
的网络请求插件,它允许你通过注解的方式定义 RESTful API 接口,从而简化网络请求的代码。retrofit_flutter
的灵感来源于 Android 的 Retrofit
库。
安装依赖
首先,你需要在 pubspec.yaml
文件中添加 retrofit
和 dio
的依赖:
dependencies:
flutter:
sdk: flutter
retrofit: ^3.0.0
dio: ^4.0.0
json_annotation: ^4.4.0
dev_dependencies:
retrofit_generator: ^3.0.0
build_runner: ^2.1.0
json_serializable: ^6.1.0
定义 API 接口
接下来,你可以通过注解的方式定义你的 API 接口。例如,假设你有一个获取用户信息的 API:
import 'package:retrofit/retrofit.dart';
import 'package:dio/dio.dart';
import 'package:json_annotation/json_annotation.dart';
part 'api_service.g.dart';
@RestApi(baseUrl: "https://jsonplaceholder.typicode.com/")
abstract class ApiService {
factory ApiService(Dio dio, {String baseUrl}) = _ApiService;
@GET("/users/{id}")
Future<User> getUser(@Path("id") int id);
}
@JsonSerializable()
class User {
final int id;
final String name;
final String username;
final String email;
User({required this.id, required this.name, required this.username, required this.email});
factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
Map<String, dynamic> toJson() => _$UserToJson(this);
}
生成代码
在定义了 API 接口之后,你需要使用 build_runner
生成相关的代码。在终端中运行以下命令:
flutter pub run build_runner build
这将生成 api_service.g.dart
文件,其中包含了 ApiService
的实现。
使用 API 接口
现在你可以使用 ApiService
来发起网络请求了:
import 'package:dio/dio.dart';
import 'api_service.dart';
void fetchUser() async {
final dio = Dio();
final apiService = ApiService(dio);
try {
final user = await apiService.getUser(1);
print("User: ${user.name}");
} catch (e) {
print("Error: $e");
}
}
void main() {
fetchUser();
}