Flutter Apollo GraphQL 客户端插件apollo_flutter的使用

Flutter Apollo GraphQL 客户端插件 apollo_flutter 的使用

apollo_flutter 是一个用于在 Flutter 应用中集成 Apollo GraphQL 的客户端库。以下是如何在 Flutter 应用中使用 apollo_flutter 的详细步骤和示例代码。

安装

首先，在你的 pubspec.yaml 文件中添加 apollo_flutter 作为依赖项：

dependencies:
  apollo_flutter: ^<version>

然后运行 flutter pub get 来安装该包。

Android 配置

在项目的 local.properties 文件中添加 TekoGoogleRegistryToken（联系 trung.cs@teko.vn 获取）：

// android/local.properties

TekoGoogleRegistry.password=<your-token>

在项目 build.gradle 文件中添加以下代码：

allprojects {
    repositories {
        ...

        Properties properties = new Properties()
        properties.load(project.rootProject.file('local.properties').newDataInputStream())

        maven {
            setUrl("https://asia-southeast1-maven.pkg.dev/teko-development/teko-mobile-sdks")

            authentication {
                basic(BasicAuthentication)
            }

            credentials {
                username = "_json_key_base64"
                password = properties.getProperty('TekoGoogleRegistry.password')
            }
        }
    }
}

iOS 配置

在终端中设置 GitHub 访问令牌以访问 Teko iOS 框架（联系 trung.cs@teko.vn 获取）：

touch ~/.bash_profile; open ~/.bash_profile

在打开的文件中添加以下行：

export GITHUB_USER_TOKEN="<your-token>"

保存文件并运行：

source ~/.bash_profile

使用 Apollo 客户端

以下是完整的示例代码，展示了如何初始化 Apollo 客户端，并获取主题颜色。

示例代码

import 'package:apollo_flutter/apollo_theme.dart';
import 'package:apollo_flutter/terra_apollo.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ApolloColorTheme? _colorTheme;

  // 初始化 Apollo 客户端
  void _initApollo() async {
    final apollo = await TerraApollo.getInstance("apollo-flutter");
    setState(() {
      _colorTheme = apollo.getTheme().colors;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Apollo Flutter 示例应用'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextButton(
              onPressed: _initApollo,
              child: const Text(
                '初始化 Apollo',
              ),
            ),
            if (_colorTheme != null) ColorThemeView(colorTheme: _colorTheme!)
          ],
        ),
      ),
    );
  }
}

class ColorThemeView extends StatelessWidget {
  final ApolloColorTheme colorTheme;

  const ColorThemeView({Key? key, required this.colorTheme}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Expanded(
      child: SingleChildScrollView(
        child: Column(
          children: [
            ColorSetView(name: "primary", colorSet: colorTheme.primary),
            ColorSetView(name: "link", colorSet: colorTheme.link),
            ColorSetView(name: "pending", colorSet: colorTheme.pending),
            ColorSetView(name: "success", colorSet: colorTheme.success),
            ColorSetView(name: "error", colorSet: colorTheme.error),
            NeutralColorSetView(colorSet: colorTheme.neutral)
          ],
        ),
      ),
    );
  }
}

class ColorSetView extends StatelessWidget {
  final String name;
  final ApolloColorSet colorSet;

  const ColorSetView({Key? key, required this.name, required this.colorSet}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            name,
            style: const TextStyle(fontWeight: FontWeight.bold),
          ),
          IntrinsicHeight(
            child: Row(
              children: [
                ColorItemView(name: "50", color: colorSet.color50),
                ColorItemView(name: "100", color: colorSet.color100),
                ColorItemView(name: "200", color: colorSet.color200),
                ColorItemView(name: "500", color: colorSet.color500),
                ColorItemView(name: "600", color: colorSet.color600),
                ColorItemView(name: "700", color: colorSet.color700),
              ],
            ),
          ),
          const SizedBox(height: 24),
        ],
      ),
    );
  }
}

class NeutralColorSetView extends StatelessWidget {
  final ApolloNeutralColorSet colorSet;

  const NeutralColorSetView({Key? key, required this.colorSet}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            "Neutral",
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          IntrinsicHeight(
            child: Row(
              children: [
                ColorItemView(name: "white", color: colorSet.white),
                ColorItemView(name: "tableHeader", color: colorSet.tableHeader),
                ColorItemView(name: "background", color: colorSet.background),
                ColorItemView(name: "divider", color: colorSet.divider),
                ColorItemView(name: "disable", color: colorSet.disable),
                ColorItemView(name: "border", color: colorSet.border),
                ColorItemView(name: "placeholder", color: colorSet.placeholder),
                ColorItemView(name: "secondaryText", color: colorSet.secondaryText),
                ColorItemView(name: "titleText", color: colorSet.titleText),
              ],
            ),
          ),
          const SizedBox(height: 24),
        ],
      ),
    );
  }
}

class ColorItemView extends StatelessWidget {
  final String name;
  final Color color;

  const ColorItemView({Key? key, required this.name, required this.color}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Expanded(
      child: Column(
        children: [
          Container(
            height: 60,
            color: color,
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 4.0),
            child: Text(name),
          ),
        ],
      ),
    );
  }
}