---
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/en/llms.txt

# Flutter

## Playground app
To test your code and see a preview of the card on an Android or IOS device, use the DivKit Playground app. You can add the card code in JSON format to the app or open a link to it:

1. [Install Flutter](https://docs.flutter.dev/get-started/install)
2. Download DivKit library files from [repository](https://github.com/divkit/divkit/tree/main/client/flutter/divkit)
3. Run [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. Select **demo**.

   1. Insert the code in JSON format in the input field

       {% note tip "Tip" %}

       To create a card code, you can use the [DivKit Web Playground sample library](https://divkit.tech/playground?samples=1).

       {% endnote %}

   2. To view the result, click **show the result**.
5. Select **samples** to find out DivKit abilities with Flutter client.

## Build MVP and draw first DivKitView.

1. Add dependency to pubspec.yaml:
    ```yaml translate=no
    dependencies:
        divkit: any
    ```
2. Import library
    ```dart translate=no
    import 'package:divkit/divkit.dart';
    ```
3. Resolve your layout with DivKitData:

    from JSON:
    ```dart translate=no
    final data = DefaultDivKitData.fromJson(json); // Map<String, dynamic>
    ```
    or from card and templates:
    ```dart translate=no
    final data = DefaultDivKitData.fromScheme(
        card: json['card'], // Map<String, dynamic>
        templates: json['templates'], // Map<String, dynamic>?
    );
    ```

4. Use DivKitView inside your widget tree with layout passed by param "data":
    ```dart translate=no
    DivKitView(
        data: data,
    )
    ```
Please ensure that there is Directionality widget in the tree.

Optionally, you can pass customs handler, actions handler and other params to configure DivKitView behavior:
```dart translate=no
DivKitView(
    data: data,
    customHandler: MyCustomHandler(), // DivCustomHandler?
    actionHandler: MyCustomActionHandler(), // DivActionHandler?
    variableStorage: MyOwnVariableStorage(), // DivVariableStorage?
)
```
If you wish to work with default div-actions and use your own actionHandler don't forget to inherit **DefaultDivActionHandler**.

<!-- source: en/_includes/index/troubleshooting.md -->
## Learn more {#troubleshooting}

You can discuss topics of interest in the DivKit user community in Telegram: [https://t.me/divkit_community_en](https://t.me/divkit_community_en).



[DivKit Repository](https://github.com/divkit/divkit)
<!-- endsource: en/_includes/index/troubleshooting.md -->