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 文件中添加 retrofitdio 的依赖:

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();
}
回到顶部