К основному содержанию
скилл CX Codex

dt-setup-flutter — скилл для Claude Code: что делает и как установить

Пошагово подключает Dynatrace к проекту на Flutter: настраивает зависимости и генерирует нативные конфиги для мониторинга.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Dynatrace/dynatrace-for-ai --skill dt-setup-flutter -a claude-code
Открыть на GitHub

Что делает dt-setup-flutter

Скилл проверяет наличие dynatrace.config.yaml в корне проекта или помогает создать его через консоль Experience Vitals. Затем он добавляет пакет dynatrace_flutter_plugin в блок dependencies файла pubspec.yaml. Плагин должен быть именно в dependencies, а не в dev_dependencies, иначе мониторинг не попадет в релизную сборку.

Команда dart run dynatrace_flutter_plugin сама вносит изменения в Gradle и Info.plist. Править нативные файлы вручную не требуется. В коде lib/main.dart скилл заменяет runApp() вызовом Dynatrace().start(), подключает DynatraceNavigationObserver в корневой виджет и настраивает перехват вызовов http.Client.

Для работы требуются Flutter SDK, утилита dart в переменной PATH и доступ к консоли Dynatrace для получения applicationId и beaconUrl. Скилл не предназначен для запросов к данным RUM — для аналитики метрик используется отдельный инструмент.

Какие задачи решает

  • добавить dynatrace_flutter_plugin в зависимости Flutter-проекта
  • сконфигурировать dynatrace.config.yaml через консоль Experience Vitals
  • заменить runApp на Dynatrace().start в lib/main.dart
  • подключить отслеживание экранов через DynatraceNavigationObserver
  • инструментировать HTTP-клиенты для мониторинга мобильной сети

Примеры запросов агенту

  • Подключи Dynatrace к текущему проекту на Flutter
  • Добавь dynatrace_flutter_plugin и настрой отслеживание экранов
  • Инструментируй вызовы HTTP-клиента для Dynatrace в нашем приложении

Как установить dt-setup-flutter

1Через Skills CLI (Vercel)

npx skills add Dynatrace/dynatrace-for-ai --skill dt-setup-flutter -a claude-code

2Вручную: положить файлы

~/.claude/skills/dt-setup-flutter/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/dt-setup-flutter/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора29

dt-platform-costs Анализирует фактическое потребление и расходы тенанта Dynatrace по модели DPS через DQL. Помогает найти главные драйверы трат и распределить расходы по командам. CX Codex +1 1 400установок dt-obs-ext-monitors Скилл настраивает отправку результатов внешних проверок и CI-мониторинга в Dynatrace Grail через API событий. Пригодится при замене устаревшего эндпоинта synthetic v1. CX Codex +1 1 100установок dt-sec-ioc-hunting Ищет индикаторы компрометации из отчётов и адвизори в логах и спанах Dynatrace и считает оценку подверженности угрозе от 0 до 100. CX Codex +1 1 000установок dt-obs-network-flows Скилл для Dynatrace: разбирает сетевые потоки из трёх источников и отвечает, кто с кем говорит и где рвутся соединения. CX Codex +1 912установок dt-obs-network-devices Скилл разбирает данные SNMP-мониторинга в Dynatrace: инвентарь устройств, состояние интерфейсов, топологию и логи. Пригодится, когда надо найти упавший порт или перегруженный коммутатор. CX Codex +1 907установок dt-obs-compliance-assistant Отслеживает соответствие регламенту EU DORA через Dynatrace Compliance Assistant. Помогает оценивать compliance score, состояние CIF и инциденты. CX Codex +1 889установок dt-setup-react-native Пошагово настраивает плагин Dynatrace в проектах на React Native или Expo: правит конфиги Babel, подключает зависимости и проверяет параметры приватности. CX Codex +1 860установок dt-setup-android Подключает базовый мониторинг Dynatrace к Android-проекту на Kotlin или Java. Помогает настроить плагин Gradle, параметры агента и сбор согласия пользователя. CX Codex +1 857установок

Похожие

vercel-react-native-skills vercel Набор правил по React Native и Expo для ИИ-агента: списки, анимации, навигация. Пригодится, когда агент правит мобильный код и надо, чтобы он делал это одинаково. CX Codex +1 255 200установок animate-expo emilkowalski Создаёт мобильные анимации для React Native и Expo на базе Reanimated и Gesture Handler. Помогает избежать просадок кадров на реальных устройствах. CX Codex +1 137 900установок mobile-native emilkowalski Убирает мелочи, из-за которых веб-приложение на телефоне выдаёт себя: залипающий hover, вспышку при тапе, ошибку с 100vh. CX Codex +1 86 600установок aso coreyhaines31 Анализирует страницы приложений в App Store и Google Play по правилам поисковой оптимизации. Находит слабые места в метаданных, графике и конверсии. CX Codex +1 75 400установок swiftui-pro Paul Hudson Проверяет SwiftUI-код на устаревшие API, ошибки в структуре и проблемы доступности. Пригодится для ревью и доработки проектов на SwiftUI. CX Codex +1 35 200установок orca-emulator stablyai Управляет iOS Simulator внутри Orca с живым экраном устройства. Пригодится для тапов, жестов, поворота экрана и сбора доказательств работы iOS-приложения. CX Codex +1 5 800установок

Рядом в теме «Мобильная разработка»

Всё по теме «Мобильная разработка» →

Вопросы о dt-setup-flutter

Как установить dt-setup-flutter в Claude Code?

Выполните команду npx skills add Dynatrace/dynatrace-for-ai --skill dt-setup-flutter -a claude-code в терминале.

Что делает скилл dt-setup-flutter?

Он автоматизирует интеграцию мобильного мониторинга Dynatrace во Flutter: настраивает нативный код сборок, инициализирует SDK в main.dart и подключает трекинг экранов.

Зачем скилл проверяет параметр userOptIn?

Если параметр userOptIn установлен в true, весь сбор телеметрии и отчётов о сбоях блокируется до явного вызова метода согласия applyUserPrivacyOptions.

Исходный текст

SKILL.md · Apache-2.0
---
name: dt-setup-flutter
license: Apache-2.0
description: >-
  Integrate the Dynatrace Flutter Plugin into a Flutter project — dependency setup, config,
  SDK bootstrap, navigation tracking, and verification.
  Trigger: "add Dynatrace to Flutter", "Flutter plugin setup", "instrument Flutter app",
  "integrate Dynatrace Flutter", "mobile observability Flutter", "dynatrace_flutter_plugin".
  Do NOT use for: querying Flutter RUM data (use dt-obs-frontends), non-Flutter mobile setups,
  or Dynatrace server-side configuration.
---

# Dynatrace Flutter Plugin Integration Skill

## Prerequisites

- Flutter SDK installed and `flutter` available on `PATH`
- An existing Flutter project with a `pubspec.yaml` at the project root
- A Dynatrace environment with access to Experience Vitals (to obtain `applicationId` and `beaconUrl`, or to download `dynatrace.config.yaml`)
- Console access to Experience Vitals → Mobile to configure app settings (Data Privacy, Enablement and Cost Control)
- `dart` CLI available (comes with Flutter SDK; used to run the plugin configuration script)

Work through the steps below in order, interacting with the user at each decision point. Read actual project files before suggesting changes — do not assume the current state.

## Step 1 — Check for existing `dynatrace.config.yaml`

Before asking the user anything, check whether `dynatrace.config.yaml` exists at the project root.

- **File exists:** Read it, show the `applicationId` and `beaconUrl`, and confirm they match the target environment. If correct, run the `userOptIn` check below and skip to Step 3.
- **File does not exist:** Proceed to Step 2.

**`userOptIn` check:**

Inspect the file for `userOptIn` (Android) and `DTXUserOptIn` (iOS).

- **Present on both platforms:** Trust the value as-is. If `true`, flag Step 7a. If `false`, skip Step 7a.
- **Absent from either platform:** Ask the user: **"Do you have User Opt-In mode enabled or disabled?"** (If unsure: Experience Vitals → Mobile → [Your App] → Settings → Data Privacy.) Add the missing value to the relevant platform(s), then flag Step 7a if the final value is `true`.

## Step 2 — Obtain `dynatrace.config.yaml` (only if Step 1 found no file)

Ask the user which approach they prefer:

**Option A — Download from console (recommended):**

1. Open their Dynatrace environment
1. Navigate to: Experience Vitals → New Frontend → Mobile
1. Enter app name and choose **Flutter** as the platform
1. On the **Select capability and settings** screen, configure monitoring features (Crash reporting, user action monitoring, etc.). User action monitoring can be changed later via Experience Vitals → [App] → Settings → Enablement and Cost Control.
1. Download `dynatrace.config.yaml` and place it at the project root (same level as `pubspec.yaml`)

Once the file is in place, apply the `userOptIn` check from Step 1 and flag Step 7a if needed.

**Option B — Provide credentials manually:**
Read `references/config-yaml.md` for the full template and conditional blocks. Collect all required values from the user before creating any files, then apply the `userOptIn` check and flag Step 7a if needed.

## Step 3 — Add the dependency

Read `pubspec.yaml` first.

- **Not present:** Run:
  ```bash
  flutter pub add dynatrace_flutter_plugin
  ```
- **Already under `dependencies`:** No change — proceed to Step 4.
- **Under `dev_dependencies`:** Remove it from `dev_dependencies`, then run `flutter pub add dynatrace_flutter_plugin`. The plugin is required at runtime, including in release builds.

## Step 4 — Fetch dependencies

If Step 3 ran `flutter pub add`, dependencies are already fetched — skip this step.

Otherwise run:

```bash
flutter pub get
```

Confirm success before continuing.

## Step 5 — Run the Dynatrace configuration script

```bash
dart run dynatrace_flutter_plugin
```

This reads `dynatrace.config.yaml` and automatically configures Android Gradle and `ios/Runner/Info.plist`. No manual native file edits are needed.

Common mistakes to flag and correct:

- `flutter pub run dynatrace_flutter_plugin` — wrong, use `dart run dynatrace_flutter_plugin`
- Manual edits to `build.gradle` / `build.gradle.kts` or `Info.plist` — not needed

## Step 6 — Bootstrap the SDK in `main.dart`

Read `lib/main.dart`. Replace `runApp(...)` with `Dynatrace().start(...)`:

```dart
import 'package:dynatrace_flutter_plugin/dynatrace_flutter_plugin.dart';
import 'package:flutter/material.dart';

void main() {
  Dynatrace().start(const MyApp());
}
```

- `Dynatrace().start()` calls `runApp` internally — remove any separate `runApp` call
- `WidgetsFlutterBinding.ensureInitialized()` is not required by Dynatrace before `start()`, but keep it if your app needs it for other pre-start initialization (for example, plugin or platform setup)
- Do not `await` `Dynatrace().start()` itself; only use `await` for other app initialization that must complete before calling `start()`

## Step 7 — Add navigation tracking

In the root `MaterialApp` or `CupertinoApp`, add `DynatraceNavigationObserver()` to `navigatorObservers`:

```dart
MaterialApp(
  navigatorObservers: [DynatraceNavigationObserver()],
  ...
)
```

```dart
CupertinoApp(
  navigatorObservers: [DynatraceNavigationObserver()],
  ...
)
```

## Step 7a — Privacy options call (only if `userOptIn: true`)

**Skip this step if `userOptIn` was not set to `true` during Steps 1 or 2.**

Read `references/user-opt-in.md` for the full guidance on `DataCollectionLevel`, `crashReportingOptedIn`, and placement options. Ask the user the questions defined there, then apply the call to the relevant file.

## Step 8 — HTTP instrumentation (if applicable)

Check `pubspec.yaml` for the `http` package dependency. Separately, search the codebase for `import 'dart:io'` and `HttpClient` usages. If either is present, apply instrumentation:

| Package | Instrumentation |
|---|---|
| `http` | `Dynatrace().createHttpClient()` — replace `http.Client()` at the construction site |
| `dart:io HttpClient` | Manual timing via `Dynatrace().createWebRequestTiming(...)` — no drop-in wrapper exists |

`createHttpClient()` accepts an optional `client:` parameter to wrap an existing client instance. Find every `http.Client()` construction site in the project and replace it with `Dynatrace().createHttpClient()`.


If none are present, note it for when network calls are added.

## Step 9 — Post-setup summary

Confirm to the user what is active:

**Enabled by default** (when `userOptIn` is `false` or absent):

- ✅ Crash reporting
- ✅ User action tracking
- ✅ Network monitoring
- ✅ Lifecycle monitoring
- ✅ Auto-start

> When `userOptIn: true`, all data collection — including crash reporting — is gated on the `applyUserPrivacyOptions(...)` call.

**Configured during this setup:**

- Privacy mode: [userOptIn: true — consent call added / opt-out (SDK default)]
- Navigation tracking: [DynatraceNavigationObserver added]
- HTTP instrumentation: [applied / not applicable yet]

## Step 10 — Verification

Read `references/verification.md` and show the user the verification checklist. If no data appears after 5 minutes, work through the troubleshooting steps in that file.

## Reference Files

- `references/config-yaml.md` — Full `dynatrace.config.yaml` template with Grail and userOptIn conditional blocks
- `references/user-opt-in.md` — `applyUserPrivacyOptions` guidance, `DataCollectionLevel` options, placement options
- `references/verification.md` — Post-setup verification checklist and troubleshooting

## External References

- [dynatrace_flutter_plugin on pub.dev](https://pub.dev/packages/dynatrace_flutter_plugin) — package changelog, API docs, and latest version
- [Dynatrace Flutter Installation Docs](https://docs.dynatrace.com/docs/observe/digital-experience/new-rum-experience/mobile-frontends/flutter/id-01-initial-setup) — initial setup docs

© Dynatrace · Apache-2.0 · Dynatrace/dynatrace-for-ai

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой