Flutter插件fluvvm的介绍与使用

Flutter插件fluvvm的介绍与使用

简介

Fluvvm 是一个轻量级库，用于从使用 provider 和 MVVM 架构的 Flutter 应用程序中移除一些样板代码。此外，它还包括一个 NetworkRequest 类，使得网络请求变得简单易用。

为什么需要

我真的很享受使用 Flutter 和名为 provider 的惊人库，以及我最喜欢的架构 MVVM。然而，我发现自己一遍又一遍地编写相同的代码，并且 MVVM 模式并不是默认提供的。因此，我决定创建一个库来移除一些样板代码，并使网络、业务和 UI 层之间的界限更加清晰。

如何使用

1. 创建一个 Repository

class MyRepository {
  String baseUrl = 'https://example.com';
  String path = '/api/v1/data';

  late NetworkRequest fetchRequest = NetworkRequest(
    baseUrl: baseUrl,
    path: path,
    query: {'id': '1'},
  );

  Future<Map<String, dynamic>> store(Object data) async {
    try {
      final request = NetworkRequest(
        baseUrl: baseUrl,
        path: path,
        method: NetworkMethod.post,
      );
      return await request.fire(body: data);
    } catch (e) {
      rethrow;
    }
  }
}

2. 创建一个 ViewModel 并包含 FluvvmState 和 FluvvmIntent

class MyViewmodel extends Viewmodel<ExampleState, ExampleIntent> {
  final _repository = ExampleRepository();

  List<Object> get content => _content;
  List<Object> _content = [];

  @override
  void onBound() {
    setState(ExampleState.loading);
    unawaited(_fetchData());
  }

  @override
  void raiseIntent(ExampleIntent intent, {Object? data}) {
    switch (intent) {
      case ExampleIntent.fetchData:
        setState(ExampleState.loading);
        unawaited(_fetchData());
        break;
      case ExampleIntent.storeData:
        setState(ExampleState.loading);
        unawaited(_storeData(data));
        break;
      case ExampleIntent.navigateToWidget:
        // 导航到新的小部件并传递数据（如果需要）。
        break;
    }
  }

  Future<void> _fetchData() async {
    try {
      final map = await _repository.fetchRequest.fire();
      _content = _modifyDataBeforeServingToWidget(map);
      setState(ExampleState.content);
    } catch (e) {
      setState(ExampleState.error);
    }
  }

  Future<void> _storeData(Object? data) async {
    final thisData = data;
    if (thisData == null) {
      setState(ExampleState.error);
      return;
    }

    try {
      final map = await _repository.store(thisData);
      _modifyDataBeforeServingToWidget(map);
      setState(ExampleState.content);
    } catch (e) {
      setState(ExampleState.error);
    }
  }

  List<Object> _modifyDataBeforeServingToWidget(Map map) {
    return [];
  }
}

enum ExampleState implements FluvvmState {
  loading,
  content,
  error;
}

enum ExampleIntent with FluvvmIntent {
  fetchData,
  storeData,
  navigateToWidget,
}

3. 创建一个继承自 NotifiedWidget 的 Widget

class MyWidget extends NotifiedWidget<ExampleViewmodel> {
  const MyWidget({super.key, required super.viewmodel});

  @override
  Widget buildOnNotified(BuildContext context, ExampleViewmodel viewmodel) {
    return switch (viewmodel.state) {
      ExampleState.loading => const Center(child: CircularProgressIndicator()),
      ExampleState.content => CustomScrollView(
          slivers: [
            const SliverAppBar(
              title: Text('MyWidget'),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text(viewmodel.content[index].toString()),
                  onTap: () => viewmodel.raiseIntent(
                    ExampleIntent.storeData,
                    data: {'newData': index},
                  ),
                ),
                childCount: viewmodel.content.length,
              ),
            ),
          ],
        ),
      ExampleState.error => const Center(child: Text('Error'))
    };
  }
}

NetworkRequest

GET 请求

/// 简单的 GET 请求。
Future<Map<String, dynamic>> get(
  String id,
  Map<String, String>? headers,
) async {
  try {
    final request = NetworkRequest(
      baseUrl: 'https://example.com',
      path: '/api/v1/data',
      query: {'id': id},
    );
    return await request.fire(headers: headers);
  } catch (e) {
    rethrow;
  }
}

/// 带有映射的简单 GET 请求。
Future<MyResponseModel> getWithMap(String id) async {
  try {
    final request = NetworkRequest(
      baseUrl: 'https://example.com',
      path: '/api/v1/data',
      query: {'id': id},
    );
    return await request.fireAndMap(MyResponseModel.fromJson);
  } catch (e) {
    rethrow;
  }
}

POST 请求

Future<Map<String, dynamic>> post(Object data) async {
  try {
    final request = NetworkRequest(
      baseUrl: 'https://example.com',
      path: '/api/v1/data',
      method: NetworkMethod.post,
    );
    return await request.fire(body: data);
  } catch (e) {
    rethrow;
  }
}

PUT 请求

Future<Map<String, dynamic>> put(Object data) async {
  try {
    final request = NetworkRequest(
      baseUrl: 'https://example.com',
      path: '/api/v1/data',
      method: NetworkMethod.put,
    );
    return await request.fire(body: data);
  } catch (e) {
    rethrow;
  }
}

DELETE 请求

/// 简单的 DELETE 请求。
Future<Map<String, dynamic>> delete(String id, Object? data) async {
  try {
    final request = NetworkRequest(
      baseUrl: 'https://example.com',
      path: '/api/v1/data',
      method: NetworkMethod.delete,
      query: {'id': id},
    );
    return await request.fire(body: data);
  } catch (e) {
    rethrow;
  }
}