Add an example for synchronized map

example/lib/main.dart

@@ -3,6 +3,7 @@ import 'pages/select_bloc.dart';
 import 'pages/index.dart';
 import 'pages/join_query.dart';
 import 'pages/upsert.dart';
+import 'pages/sync_map.dart';
 import 'conf.dart';
 
 void main() {
@@ -16,7 +17,7 @@ Future<void> initDb() async {
   /// these queries will run only once, after the Sqlite file creation
   String q1 = """CREATE TABLE product (
       id INTEGER PRIMARY KEY,
-      name TEXT NOT NULL,
+      name VARCHAR(60) NOT NULL,
       price REAL NOT NULL,
       category_id INTEGER NOT NULL,
       CONSTRAINT category
@@ -26,7 +27,7 @@ Future<void> initDb() async {
       )""";
   String q2 = """CREATE TABLE category (
       id INTEGER PRIMARY KEY,
-      name TEXT NOT NULL
+      name VARCHAR(60) NOT NULL
       )""";
   String q3 = 'CREATE UNIQUE INDEX idx_product_name ON product (name)';
   // populate the database
@@ -55,6 +56,7 @@ final routes = {
   '/select_bloc': (BuildContext context) => PageSelectBloc(),
   '/join': (BuildContext context) => PageJoinQuery(),
   '/upsert': (BuildContext context) => UpsertPage(),
+  '/sync_map': (BuildContext context) => SyncMapPage(),
 };
 
 class MyApp extends StatelessWidget {

example/lib/pages/index.dart

@@ -40,6 +40,10 @@ class _PageIndexState extends State<PageIndex> {
                   child: const Text("Join query"),
                   onPressed: () => Navigator.of(context).pushNamed("/join"),
                 ),
+                RaisedButton(
+                  child: const Text("Synchronized map"),
+                  onPressed: () => Navigator.of(context).pushNamed("/sync_map"),
+                ),
               ],
             ));
   }

example/lib/pages/sync_map.dart

@@ -0,0 +1,82 @@
+import 'dart:math';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:observable/observable.dart';
+import 'package:sqlcool/sqlcool.dart';
+import '../conf.dart';
+
+class _SyncMapPageState extends State<SyncMapPage> {
+  SynchronizedMap productPrice;
+  SelectBloc bloc;
+
+  void setInitialData() async {
+    // get initial product price
+    num initialPrice;
+    try {
+      var res =
+          await db.select(table: "product", columns: "price", where: "id=1");
+      initialPrice = res[0]["price"];
+    } catch (e) {
+      throw (e);
+    }
+    // set the initial synchronized map data
+    productPrice = SynchronizedMap(
+        db: db,
+        table: "product",
+        where: "id=1",
+        data: ObservableMap.from({"price": "$initialPrice"}),
+        verbose: true);
+  }
+
+  Future<void> changePrice() async {
+    int _newPrice = Random().nextInt(100);
+    // this will update the price in the database
+    productPrice.data["price"] = "$_newPrice";
+  }
+
+  @override
+  void initState() {
+    this.bloc = SelectBloc(
+        database: db,
+        table: "product",
+        orderBy: "id",
+        limit: 1,
+        reactive: true);
+    setInitialData();
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        body: Stack(children: <Widget>[
+      StreamBuilder<List<Map>>(
+          stream: bloc.items,
+          builder: (BuildContext context, AsyncSnapshot snapshot) {
+            if (snapshot.hasData) {
+              return ListView.builder(
+                  itemCount: int.parse("${snapshot.data.length}"),
+                  itemBuilder: (BuildContext context, int index) {
+                    dynamic item = snapshot.data[index];
+                    return ListTile(
+                        title: Text("Price ${item["price"]}",
+                            textScaleFactor: 1.5));
+                  });
+            } else {
+              return const CircularProgressIndicator();
+            }
+          }),
+      Positioned(
+          bottom: 30.0,
+          left: 30.0,
+          child: RaisedButton(
+              child: const Text("Change price"),
+              onPressed: () => changePrice())),
+    ]));
+  }
+}
+
+class SyncMapPage extends StatefulWidget {
+  @override
+  _SyncMapPageState createState() => _SyncMapPageState();
+}