Flutter

Connecting DivKitView to a project

1. Add the dependency in pubspec.yaml:

   dependencies:
       divkit: any
   

2. Add the library at the beginning of the file where you're planning to use DivKitView:

   import 'package:divkit/divkit.dart';
   

3. Convert the layout to DivKitData in one of the following ways:

   • Using a single JSON object:

     final data = DefaultDivKitData.fromJson(json); // Map<String, dynamic>
     

   • Using card and templates separately:

     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:

   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:

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.

Learn more

Follow DivKit news in the Telegram channel: http://t.me/divkit_news

You can also discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_ru

DivKit Repository