网络与数据组件

网络与数据组件用于处理网络请求、数据序列化和状态管理。

提示：这些组件通常需要引入第三方包，请确保在 pubspec.yaml 中添加依赖。

📱 渲染效果预览

🌐

http

简单易用
官方推荐

⚡

dio

功能强大
拦截器支持

📱 渲染效果预览

{ "name": "张三", "age": 25 }

http / dio

http 和 dio 是常用的网络请求库。

// 使用 http 包
import 'package:http/http.dart' as http;

final response = await http.get(Uri.parse('https://api.example.com/data'));
if (response.statusCode == 200) {
  print(response.body);
}

// 使用 dio 包
import 'package:dio/dio.dart';

final dio = Dio();
final response = await dio.get('https://api.example.com/data');
print(response.data);

📱 渲染效果预览

计数: 0

json_serializable

json_serializable 提供类型安全的 JSON 序列化。

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  final String name;
  final int age;

  User({required this.name, required this.age});

  factory User.fromJson(Map json) => _$UserFromJson(json);
  Map toJson() => _$UserToJson(this);
}

📱 渲染效果预览

Event

→

Bloc

→

State

→

Provider

Provider 是 Flutter 官方推荐的状态管理方案。

// 创建 Provider
class Counter extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

// 使用 Provider
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => Counter(),
      child: MyApp(),
    ),
  );
}

// 在 Widget 中使用
Consumer(
  builder: (context, counter, child) {
    return Text('计数: ${counter.count}');
  },
)

📱 渲染效果预览

计数: 0

Bloc / Cubit

Bloc/Cubit 是一个强大的状态管理库。

// 创建 Cubit
class CounterCubit extends Cubit {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
}

// 使用 Cubit
void main() {
  runApp(
    BlocProvider(
      create: (_) => CounterCubit(),
      child: MyApp(),
    ),
  );
}

// 在 Widget 中使用
BlocBuilder(
  builder: (context, count) {
    return Text('计数: $count');
  },
)

📱 渲染效果预览

计数: 0

GetX

GetX 是一个轻量级且功能全面的状态管理和路由库。

// 创建 Controller
class CounterController extends GetxController {
  var count = 0.obs;

  void increment() => count++;
}

// 使用 GetX
void main() {
  Get.put(CounterController());
  runApp(MyApp());
}

// 在 Widget 中使用
Obx(() => Text('计数: ${Get.find().count.value}'))

📱 渲染效果预览

计数: 0

Riverpod

Riverpod 是 Provider 的改进版本，提供更好的类型安全。

// 创建 Provider
final counterProvider = StateProvider((ref) => 0);

// 使用 Riverpod
void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// 在 Widget 中使用
Consumer(
  builder: (context, ref, _) {
    final count = ref.watch(counterProvider);
    return Text('计数: $count');
  },
)

选择建议：

新手推荐：Provider 或 GetX
大型项目推荐：Bloc/Cubit
追求类型安全：Riverpod
网络请求：dio（功能更强大）

← 性能优化组件主题与样式组件 →