divkit #

DivKit client on Flutter library.

How it works #

DivKit builds native views from JSON data.

JSON → DivData → DivKitView

• JSON – raw data with templates in DivKit format (see DivKit schema).

• DivData – data objects parsed from JSON.

• DivKitView — plain Flutter Widget

Playground app #

Use DivKit playground app to look through layout examples and supported functions.

Documentation. Medium tutorial. Habr tutorial.

Telegram: News | English-speaking chat | Чат на русском.

Supported features #

Flutter client is in development, feel free to contribute and help community use DivKit on this platform.

Supported components (may contain unavailable features for more info look at documentation):

• text
• image
• container
• state
• input
• gallery
• custom

DivKit Flutter. Quick start. #

Build app and draw your first DivKitView. #

1. Add dependency to pubspec.yaml:

   dependencies:
       divkit: any
   

2. Import library

   import 'package:divkit/divkit.dart';
   

3. Resolve your layout with DivKitData:

   from JSON:

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

   or from card and templates:

   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":

   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:

    DivKitView(
      data: data,
      customHandler: MyCustomHandler(), // DivCustomHandler?
      actionHandler: MyCustomActionHandler(), // DivActionHandler?
      variableStorage: MyOwnVariableStorage(), // DivVariableStorage?
    )

Important! If you wish to work with default div-actions and use your own actionHandler don't forget to inherit DefaultDivActionHandler.