[web] hive values reads from another tabs are out of date

[andrea689]

Steps to Reproduce

• update a value from first tab (box.put('darkMode', true))
• read the value from second tab (box.get('darkMode'))
• expected true, but it returns false even if the DB is up to date.

https://user-images.githubusercontent.com/5927329/186697903-091e7e86-6bfa-4db5-8d26-c78ff05433f1.mov

Code sample

import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';

const testBox = 'darkModeTutorial';

void main() async {
  await Hive.initFlutter();
  await Hive.openBox(testBox);

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<Box<dynamic>>(
      valueListenable: Hive.box(testBox).listenable(),
      builder: (context, box, widget) {
        var darkMode = box.get('darkMode', defaultValue: false);
        return MaterialApp(
          themeMode: darkMode ? ThemeMode.dark : ThemeMode.light,
          darkTheme: ThemeData.dark(),
          home: Scaffold(
            body: Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Switch(
                    value: darkMode,
                    onChanged: (val) {
                      box.put('darkMode', !darkMode);
                    },
                  ),
                  ElevatedButton(
                    onPressed: () =>
                        print(box.get('darkMode', defaultValue: false)),
                    child: const Text('Read'),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

Version

• Platform: Web
• Flutter version: 3.0.1
• Hive version: 2.2.3