Flutter插件dart_board_spacex_repository的介绍与使用

Flutter插件dart_board_spacex_repository的介绍与使用

dart_board_spacex_repository简介

dart_board_spacex_repository 是一个用于展示 SpaceX 过去发射数据的 Flutter 插件。该插件使用了 GraphQL 来获取数据，并提供了移动端、网页端和桌面端的支持。

dart_board_spacex_repository特性

• GraphQL: 使用 GraphQL 查询来获取数据。
• 拉取100条记录: 每次请求都会拉取100条记录。
• 列表/详情: 展示发射列表及其详细信息。
• 多平台支持: 支持移动设备、网页和桌面。
• 无状态小部件: 所有的小部件都是无状态的。
• 响应式布局: 自动适应横屏和竖屏模式。
• 分页图片: 图片可以分页加载。
• 精美背景: 提供精美的背景设计。

快捷说明

• 结构简化: 本项目只分为两部分，而通常应分为三部分（应用层、UI层、数据层）。这里合并为了应用+UI层与数据层，以简化实现。
• 不支持分页/刷新: 由于发射事件不是每分钟或每天发生一次，所以仅在启动时刷新即可。
• 无缓存: 如果要添加缓存，会创建两个新的存储库（例如 DiskRepository 和 CachedRepository）。
• 深度链接: 通过平台路由解析器可以实现深度链接。例如，可以在夜间支持此功能。

更健壮的架构

• Redux: 虽然 Redux 在 dart-board 和 Flutter 中可用，但对本项目来说过于复杂。
• 可靠的ID: 目前看不到可靠的ID，时间可以作为标识符。

关于“定位器”(Locator)的说明

你可能注意到了 LocatorDecoration 和 locateAndBuild()。这是来自 dart-board 的 Locator。

装饰器允许你创建状态和服务对象，而 locate 和 locateAndBuild 可以用来集成这些对象。

我使用了 ChangeNotifiers 来简化实现。

错误处理

目前没有完整的错误处理机制。如果有需求，可以将错误/异常放入模拟服务中进行测试。

测试/模拟

数据层接受一个 Repository 对象，因此可以提供模拟版本。虽然数据层逻辑很少，但仍可以在 widget 测试中进行验证。

示例代码

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SpaceXLaunchList(),
    );
  }
}

class SpaceXLaunchList extends StatefulWidget {
  [@override](/user/override)
  _SpaceXLaunchListState createState() => _SpaceXLaunchListState();
}

class _SpaceXLaunchListState extends State<SpaceXLaunchList> {
  final HttpLink httpLink = HttpLink('https://api.spacex.land/graphql/');

  ValueNotifier<GraphQLClient> client = ValueNotifier(
    GraphQLClient(
      link: httpLink,
      cache: GraphQLCache(store: InMemoryStore()),
    ),
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GraphQLProvider(
      client: client,
      child: Scaffold(
        appBar: AppBar(title: Text('SpaceX 发射列表')),
        body: Query(
          options: QueryOptions(
            document: gql(r'''
              query GetLaunches {
                launchesPast(limit: 100) {
                  mission_name
                  launch_date_utc
                  rocket {
                    rocket_name
                  }
                }
              }
            '''),
          ),
          builder: (QueryResult result, {refetch, fetchMore}) {
            if (result.hasException) {
              return Center(child: Text(result.exception.toString()));
            }

            if (result.isLoading) {
              return Center(child: CircularProgressIndicator());
            }

            final launches = result.data['launchesPast'];
            return ListView.builder(
              itemCount: launches.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(launches[index]['mission_name']),
                  subtitle: Text(launches[index]['launch_date_utc']),
                  trailing: Text(launches[index]['rocket']['rocket_name']),
                );
              },
            );
          },
        ),
      ),
    );
  }
}