---
metadata:
  - name: generator
    content: Diplodoc Platform v5.50.3
alternate:
  - https://divkit.tech/docs/en/concepts/quick-start-flutter.md
  - https://divkit.tech/docs/ru/concepts/quick-start-flutter.md
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt

# Flutter

## Playground app
Чтобы протестировать ваш код и посмотреть превью карточки на устройстве Android или IOS, используйте приложение DivKit Playground. Вы можете добавить в приложение код карточки в формате JSON или открыть ссылку на него:

1. [Установите Flutter](https://docs.flutter.dev/get-started/install)
2. Скачайте исходные файлы DivKit из [репозитория](https://github.com/divkit/divkit/tree/main/client/flutter/divkit)
3. Запустите [Playground App](https://github.com/divkit/divkit/blob/main/client/flutter/divkit/example/lib/main.dart):
    ```bash translate=no
    flutter run -t example/lib/main.dart
    ```
4. Выберите **demo**.

   1. Добавьте JSON-код верстки вставив его из буффера обмена в поле ввода

       {% note tip "Совет" %}

       Для создания кода карточки вы можете использовать [библиотеку примеров DivKit Web Playground](https://divkit.tech/playground?samples=1).

       {% endnote %}

   2. Чтобы посмотреть результат, нажмите кнопку **show the result**.
5. Выберите **samples**, чтобы посмотреть возможности клиента DivKit на Flutter.

## Создание MVP и отрисовка первого DivKitView

1. Добавьте зависимость в pubspec.yaml:
    ```yaml translate=no
    dependencies:
        divkit: any
    ```
2. Импортируйте библиотеку:
    ```dart translate=no
    import 'package:divkit/divkit.dart';
    ```
3. Подготовьте макет с помощью DivKitData:

    из JSON:
    ```dart translate=no
    final data = DefaultDivKitData.fromJson(json); // Map<String, dynamic>
    ```
    или из карточки и шаблонов:
    ```dart translate=no
    final data = DefaultDivKitData.fromScheme(
        card: json['card'], // Map<String, dynamic>
        templates: json['templates'], // Map<String, dynamic>?
    );
    ```

4. Используйте DivKitView в дереве виджетов, передав макет через параметр "data":
    ```dart translate=no
    DivKitView(
        data: data,
    )
    ```
Убедитесь, что в дереве виджетов есть виджет Directionality.

При необходимости вы можете передать пользовательские обработчики, обработчики действий и другие параметры для настройки поведения DivKitView:
```dart translate=no
DivKitView(
    data: data,
    customHandler: MyCustomHandler(), // DivCustomHandler?
    actionHandler: MyCustomActionHandler(), // DivActionHandler?
    variableStorage: MyOwnVariableStorage(), // DivVariableStorage?
)
```
Если вы хотите работать со стандартными div-действиями и использовать свой собственный actionHandler, не забудьте унаследоваться от **DefaultDivActionHandler**.

<!-- source: ru/_includes/index/troubleshooting.md -->
## Узнать больше {#troubleshooting}

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru).



[Репозиторий DivKit](https://github.com/divkit/divkit)




<!-- endsource: ru/_includes/index/troubleshooting.md -->