آموزش Dio و Retrofit در فلاتر

1404-01-04
ارسال شده توسط
فلاتر
آموزش Dio و Retrofit در فلاتر

در دنیای توسعه اپلیکیشن‌های موبایل، ارتباط با وب‌سرویس‌ها (Web Services) یکی از نیازهای اساسی است. اپلیکیشن‌های مدرن معمولاً برای دریافت یا ارسال داده‌ها به سرور، از APIهای RESTful استفاده می‌کنند. در فلاتر، برای برقراری ارتباط با سرور، کتابخانه‌های متعددی وجود دارند که Dio و Retrofit از محبوب‌ترین آن‌ها هستند.

در این آموزش، ابتدا با مفاهیم وب سرویس و پروتکل HTTP آشنا می‌شویم، سپس نحوه پیاده‌سازی و استفاده از Dio و Retrofit را به صورت عملی در فلاتر بررسی خواهیم کرد.

🌐 وب سرویس چیست؟

وب سرویس به مجموعه‌ای از پروتکل‌ها و استانداردها گفته می‌شود که برای تبادل اطلاعات بین برنامه‌های مختلف از طریق اینترنت استفاده می‌شود. وب سرویس‌ها می‌توانند داده‌ها را از سمت سرور به کلاینت (موبایل یا وب) ارسال یا دریافت کنند.

💡 انواع وب سرویس‌ها

  1. REST (Representational State Transfer):
    • از پروتکل HTTP برای تبادل اطلاعات استفاده می‌کند.
    • ساختار ساده‌ای دارد و بیشتر اپلیکیشن‌های موبایل از این نوع وب‌سرویس بهره می‌برند.
  2. SOAP (Simple Object Access Protocol):
    • پروتکلی پیچیده‌تر و مبتنی بر XML است.
    • کمتر در توسعه موبایل مورد استفاده قرار می‌گیرد.
وب سرویس‌

🔥 متدهای پروتکل HTTP

در ارتباط با وب سرویس‌های RESTful، از متدهای HTTP زیر برای انتقال اطلاعات استفاده می‌شود:

متدهای پروتکل HTTP
متدتوضیح
GETدریافت اطلاعات از سرور
POSTارسال داده به سرور
PUTبه‌روزرسانی کامل داده
PATCHبه‌روزرسانی جزئی داده
DELETEحذف داده از سرور

🚀 کتابخانه‌های وب سرویس در فلاتر

در فلاتر، برای برقراری ارتباط با وب سرویس می‌توان از کتابخانه‌های مختلفی استفاده کرد:

  1. http: کتابخانه پیش‌فرض فلاتر برای ارسال درخواست‌های ساده.
  2. Dio: کتابخانه‌ای قدرتمند با قابلیت‌های پیشرفته مثل مدیریت Timeout، Interceptor، Multipart و پشتیبانی از JSON serialization.
  3. Retrofit: کتابخانه‌ای بر پایه Dio که برای ایجاد API Client با قابلیت‌های Code Generation استفاده می‌شود.
  4. Chopper: کتابخانه دیگری که برای ساخت کلاینت‌های REST استفاده می‌شود.
آموزش استفاده از تبلیغات Admob در برنامه نویسی فلاتر
خواندن این مقاله

✅ ما در این آموزش Dio و Retrofit در فلاتر را استفاده می‌کنیم.

⚙️ آشنایی با کتابخانه Dio و امکانات آن

dio در فلاتر

Dio یک کتابخانه HTTP پیشرفته برای فلاتر است که ویژگی‌های قدرتمندی مانند موارد زیر دارد:

  • پشتیبانی از درخواست‌های GET، POST، PUT، DELETE
  • مدیریت خطاها و Timeout
  • پشتیبانی از Interceptor
  • قابلیت Multipart Upload برای آپلود فایل‌ها
  • تبدیل خودکار JSON به Object
  • مدیریت Headerها و Token

🛠️ پیاده‌سازی Retrofit با Dio در فلاتر

پیاده‌سازی Dio و Retrofit

در این بخش نحوه راه‌اندازی و استفاده از Dio و Retrofit را به صورت عملی پیاده‌سازی می‌کنیم.

1️⃣ اضافه کردن پکیج‌ها به pubspec.yaml:

ابتدا کتابخانه‌های موردنیاز را به پروژه اضافه کنید:

1
2
3
4
5
6
7
8
9
10
11
12
dependencies:
  flutter:
    sdk: flutter
  dio: ^5.4.0
  retrofit: ^4.0.3
  json_annotation: ^4.8.1
  logger: ^2.0.2+1
  flutter_bloc: ^8.1.3
  equatable: ^2.0.5
  freezed_annotation: ^2.2.0
  build_runner: ^2.3.3
  retrofit_generator: ^8.0.2

✅ دستور زیر را برای نصب پکیج‌ها اجرا کنید:

1
flutter pub get

2️⃣ ایجاد مدل داده

داخل فولدر lib/models فایلی به نام user_model.dart ایجاد کنید و مدل خود را بنویسید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import 'package:json_annotation/json_annotation.dart';
 
part 'user_model.g.dart';
 
@JsonSerializable()
class UserModel {
  final int id;
  final String name;
  final String email;
 
  UserModel({required this.id, required this.name, required this.email});
 
  factory UserModel.fromJson(Map<String, dynamic> json) => _$UserModelFromJson(json);
 
  Map<String, dynamic> toJson() => _$UserModelToJson(this);
}

✅ برای تولید فایل‌های JSON، دستور زیر را اجرا کنید:

1
flutter pub run build_runner build --delete-conflicting-outputs

3️⃣ ایجاد کلاینت Retrofit

یک فایل جدید به نام api_service.dart در مسیر lib/api/ ایجاد کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import 'package:dio/dio.dart';
import 'package:retrofit/http.dart';
import '../models/user_model.dart';
 
part 'api_service.g.dart';
 
@RestApi(baseUrl: "https://jsonplaceholder.typicode.com")
abstract class ApiService {
  factory ApiService(Dio dio, {String baseUrl}) = _ApiService;
 
  @GET("/users")
  Future<List<UserModel>> getUsers();
 
  @POST("/users")
  Future<UserModel> createUser(@Body() UserModel user);
 
  @PUT("/users/{id}")
  Future<UserModel> updateUser(@Path("id") int id, @Body() UserModel user);
 
  @DELETE("/users/{id}")
  Future<void> deleteUser(@Path("id") int id);
}

✅ حالا دستور زیر را برای تولید فایل‌های Retrofit اجرا کنید:

1
flutter pub run build_runner build --delete-conflicting-outputs

4️⃣ ایجاد Repository

در مسیر lib/repository/ یک فایل به نام user_repository.dart ایجاد کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import 'package:dio/dio.dart';
import '../api/api_service.dart';
import '../models/user_model.dart';
 
class UserRepository {
  final ApiService apiService;
 
  UserRepository({required this.apiService});
 
  Future<List<UserModel>> getUsers() async {
    return await apiService.getUsers();
  }
 
  Future<UserModel> createUser(UserModel user) async {
    return await apiService.createUser(user);
  }
 
  Future<UserModel> updateUser(int id, UserModel user) async {
    return await apiService.updateUser(id, user);
  }
 
  Future<void> deleteUser(int id) async {
    await apiService.deleteUser(id);
  }
}

⚡️ پیاده‌سازی مثال عملی

در lib/main.dart کد زیر را اضافه کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'api/api_service.dart';
import 'models/user_model.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  const HomePage({super.key});
 
  @override
  State<HomePage> createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  late ApiService apiService;
 
  @override
  void initState() {
    super.initState();
    final dio = Dio();
    apiService = ApiService(dio);
  }
 
  Future<void> fetchUsers() async {
    List<UserModel> users = await apiService.getUsers();
    for (var user in users) {
      print('User: ${user.name}');
    }
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Dio + Retrofit")),
      body: Center(
        child: ElevatedButton(
          onPressed: fetchUsers,
          child: const Text("Fetch Users"),
        ),
      ),
    );
  }
}

🎯 نتیجه‌گیری

در این آموزش:

  • با مفاهیم وب سرویس و متدهای HTTP آشنا شدیم.
  • کتابخانه‌های مهم فلاتر برای مدیریت وب‌سرویس را بررسی کردیم.
  • پیاده‌سازی Dio و Retrofit را انجام دادیم.
  • یک مثال عملی از ارتباط با سرور را ایجاد کردیم.
دریافت اطلاعات باتری تلفن همراه در فلاتر
خواندن این مقاله

🔥 حالا می‌توانید با Dio و Retrofit به راحتی APIهای پیشرفته را در پروژه‌های فلاتر خود مدیریت کنید. 🚀

دیدگاهتان را بنویسید