Flutter Web и Hive

Хранение данных во Flutter Web с помощью Hive

Flutter Web и Hive

Улей во Flutter Web

Как хранить данные в браузере во Flutter Web? Хм…

Все в одном ресурсе Flutter: https://flatteredwithflutter.com/using-hive-in-flutter-web/

Предварительные требования:

В этой статье предполагается, что читатель знает о генерации кода во Flutter.

Начинать…

Посмотреть демо здесь

Веб-сайт: https://web.flatteredwithflutter.com/#/

Мы кратко расскажем о

Хранение данных с помощью Hive
Операции с данными
Обновления пользовательского интерфейса в реальном времени

Хранение данных с помощью Hive

Hive - это легкая база данных типа "ключ-значение". Он поддерживает мобильные устройства, настольные компьютеры и браузеры.

Мы можем сохранять данные от примитивов, таких как строки, до сложных настраиваемых объектов.

Примечание. Установите и hive, и hive_flutter.

Данные для сохранения:

Мы создали специальную модель (ArticlesModel), используя генерацию кода.

Теперь мы хотим расширить эту модель и сделать ее настраиваемой для Hive.

Включите следующую зависимость разработчика

dev_dependencies:
  hive_generator: ^0.7.1

Добавьте следующую аннотацию поверх аннотации JSON модели.

@HiveType(typeId: 1) ------> ADD THIS PART
@JsonSerializable(nullable: false)

typeId - это аннотированный идентификатор (целое число) класса.

Примечание. Эта аннотация создает класс адаптера по умолчанию с

“YourClass” + “Adapter”
// FOR OUR CASE, ArticlesModelAdapter

Затем аннотируйте каждое поле с помощью

@HiveField(0) ------> ADD THIS PART
@JsonKey(name: 'article_id')
String articleID;

Наконец, запустите команду генерации кода.

flutter pub run build_runner build --delete-conflicting-outputs

Настроить улей

Внутри вашего main.dart инициализируйте Hive, используя

await Hive.initFlutter();

и зарегистрируйте адаптер, созданный с помощью генерации кода, описанного выше. Указываем тип модели (в нашем случае ArticlesModel).

Hive.registerAdapter<ArticlesModel>(ArticlesModelAdapter());

Примечание. Для веб-браузеров данные сохраняются в IndexedDB, что делает Hive, мы не пишем для этого дополнительный код.

Посмотрите, как это выглядит в браузере,

Наконец, мы открываем коробку (все внутри улья - это коробка).

await Hive.openBox<ArticlesModel>('favorites')
//String field here is required and uniquely identifies a box

Если ящик уже открыт, получаем экземпляр. Нет дополнительного кода для проверки, открыт ли ящик.

Операции с данными

Настроив Hive вместе с моделью данных на предыдущем шаге, мы можем приступить к выполнению операций:

Вставить данные
Прочитать данные
Удалить данные

Давайте получим открытое окно, используя

final _favBox = Hive.box<ArticlesModel>('favorites')

Для вставки данных

_favBox.put('key', 'value') ---> GENERIC
_favBox.put(data.articleID, data) ---> OUR CASE SPECIFIC

Поскольку поле относится к типу ArticlesModel, следовательно, данные («значение») относятся к типу ArticlesModel. Мы назначаем идентификатор статьи в качестве ключа.

Для чтения данных

List<ArticlesModel> get fetchFromFavBox => _favBox.values.toList();

values: возвращает все элементы внутри коробки

Чтобы удалить данные,

_favBox.delete('key') ---> GENERIC
_favBox.delete(data.articleID); ---> OUR CASE SPECIFIC

При вставке мы назначили articleID в качестве ключа, поэтому мы удаляем с использованием того же ключа.

Примечание: если ключа не существует, ничего не происходит!

Обновления пользовательского интерфейса в реальном времени

В современном мире нам все нужно немедленно, то же самое касается наших операций вставки и удаления внутри Hive.

Чего мы хотим достичь

Показать вставку, мгновенное удаление
Нет, перезагрузите, пожалуйста!

Hive предоставляет слушателей для Hive Boxes. Мы используем этот слушатель на коробке, чтобы мгновенно отображать обновления.

final _favBox = Hive.box<ArticlesModel>(HiveBoxes.favBox);
// FROM ABOVE
Box<ArticlesModel> get favBox => _favBox;

favBox.listenable() ----> LISTENABLE exposed BY HIVE