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

# Flutter
## Connecting DivKitView to a project

1. Add the dependency in `pubspec.yaml`:
    ```yaml translate=no
    dependencies:
        divkit: any
    ```
2. Add the library at the beginning of the file where you're planning to use `DivKitView`:
    ```dart translate=no
    import 'package:divkit/divkit.dart';
    ```
3. Convert the layout to DivKitData in one of the following ways:

   - Using a single JSON object:
     ```dart translate=no
     final data = DefaultDivKitData.fromJson(json); // Map<String, dynamic>
     ```
   - Using `card` and `templates` separately:
     ```dart translate=no
     final data = DefaultDivKitData.fromScheme(
         card: json['card'], // Map<String, dynamic>
         templates: json['templates'], // Map<String, dynamic>?
     );
     ```

4. Use `DivKitView` inside the widget tree, passing the `data` parameter to it:
    ```dart translate=no
    DivKitView(
        data: data,
    )
    ```
For `DivKitView` to work correctly, place the Directionality widget higher up the tree.

You can customize the DivKit behavior by passing your own implementations of custom and div-action handlers, as well as other parameters:
```dart translate=no
DivKitView(
    data: data,
    customHandler: MyCustomHandler(), // DivCustomHandler?
    actionHandler: MyCustomActionHandler(), // DivActionHandler?
    variableStorage: MyOwnVariableStorage(), // DivVariableStorage?
)
```
When using a custom `actionHandler`, you need to inherit `DefaultDivActionHandler` to handle embedded div-actions.

<!-- 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 -->