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

2. Download DivKit library files from repository

3. Run Playground App:

   flutter run -t example/lib/main.dart
   

4. Select demo.

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

      Tip

      To create a card code, you can use the DivKit Web Playground sample library.

   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:

   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?
)

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

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