Flutter

Playground app

Чтобы протестировать ваш код и посмотреть превью карточки на устройстве Android или IOS, используйте приложение DivKit Playground. Вы можете добавить в приложение код карточки в формате JSON или открыть ссылку на него:

1. Установите Flutter

2. Скачайте исходные файлы DivKit из репозитория

3. Запустите Playground App:

   flutter run -t example/lib/main.dart
   

4. Выберите demo.

   1. Добавьте JSON-код верстки вставив его из буффера обмена в поле ввода

      Совет

      Для создания кода карточки вы можете использовать библиотеку примеров DivKit Web Playground.

   2. Чтобы посмотреть результат, нажмите кнопку show the result.

5. Выберите samples, чтобы посмотреть возможности клиента DivKit на Flutter.

Создание MVP и отрисовка первого DivKitView

1. Добавьте зависимость в pubspec.yaml:

   dependencies:
       divkit: any
   

2. Импортируйте библиотеку:

   import 'package:divkit/divkit.dart';
   

3. Подготовьте макет с помощью DivKitData:

   из JSON:

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

   или из карточки и шаблонов:

   final data = DefaultDivKitData.fromScheme(
       card: json['card'], // Map<String, dynamic>
       templates: json['templates'], // Map<String, dynamic>?
   );
   

4. Используйте DivKitView в дереве виджетов, передав макет через параметр "data":

   DivKitView(
       data: data,
   )
   

Убедитесь, что в дереве виджетов есть виджет Directionality.

При необходимости вы можете передать пользовательские обработчики, обработчики действий и другие параметры для настройки поведения DivKitView:

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

Если вы хотите работать со стандартными div-действиями и использовать свой собственный actionHandler, не забудьте унаследоваться от DefaultDivActionHandler.

Узнать больше

Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news.

Также вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.

Репозиторий DivKit