How to listen updated data from db and return to Ui using stream and getx

[neeluagrawal04]

How to listen updated data from db and return to Ui using stream and getx as state management? Please provide any example of this as well.

[pratamatama]

I assume you have database already set up. You could do something like this...

main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:yourapp/app/app.dart';
import 'package:yourapp/app/services/database_service.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Get.putAsync(() => DatabaseService().init());

  runApp(const App());
}

database_service.dart

import 'package:get/get.dart';
import 'package:yourapp/app/data/database.dart';

class DatabaseService extends GetxService {
  static DatabaseService get instance => Get.find();

  late AppDatabase db;

  Future<DatabaseService> init() async {
    db = await $FloorAppDatabase.databaseBuilder('yourapp.db').build();
    return this;
  }

  @override
  void onClose() async {
    await db.close();
    super.onClose();
  }
}

category.dart

import 'package:floor/floor.dart';
import 'package:yourapp/app/data/entities/base.dart';

@Entity(tableName: 'categories')
class Category extends BaseEntity {
  final String name;

  @ColumnInfo(name: 'label_color')
  final int? labelColor;

  Category(
    this.name,
    this.labelColor, {
    int? id,
    DateTime? createdAt,
    DateTime? updatedAt,
  }) : super(id: id, createdAt: createdAt, updatedAt: updatedAt);

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is Category &&
          runtimeType == other.runtimeType &&
          id == other.id &&
          name == other.name &&
          labelColor == other.labelColor &&
          createdAt == other.createdAt &&
          updatedAt == other.updatedAt;

  @override
  int get hashCode =>
      id.hashCode ^
      name.hashCode ^
      labelColor.hashCode ^
      createdAt.hashCode ^
      updatedAt.hashCode;

  @override
  String toString() {
    return 'Category { '
        'id: $id, '
        'name: $name, '
        'labelColor: $labelColor, '
        'createdAt: $createdAt, '
        'updatedAt: $updatedAt '
        '}';
  }
}

category_dao.dart

import 'package:floor/floor.dart';
import 'package:yourapp/app/data/entities/category.dart';

@dao
abstract class CategoryDao {
  @Query('SELECT * FROM categories')
  Stream<List<Category>> stream();
}

database.dart

import 'dart:async';
import 'package:floor/floor.dart';
import 'package:yourapp/app/data/daos/category_dao.dart';
import 'package:yourapp/app/data/entities/category.dart';
// ignore: depend_on_referenced_packages
import 'package:sqflite/sqflite.dart' as sqflite;

part 'database.g.dart';

@Database(version: 1, entities: [Category])
abstract class AppDatabase extends FloorDatabase {
  CategoryDao get categoryDao;
}

category_controller.dart

import 'package:yourapp/app/services/database_service.dart';
import 'package:yourapp/app/data/entities/category.dart';

class CategoryController extends GetxController {
  final _db = DatabaseService.instance.db;
  final categories = <Category>[].obs;

  @override
  onInit() {
    categories.bindStream(_db.categoryDao.stream());
    super.onInit();
  }
}

categories_page.dart

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

class CategoriesPage extends GetView<CategoryController> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CategoriesPage')),
      ///
      /// [Obx] will handle the stream of changes and update the widget inside it automatically with the new values, it will also handle the 
      /// disposal when it's no longer exists in a widget tree so manual stream closing through `onClose` method of your controller is not 
      /// necessary.
      body: Obx(
        () => ListView.builder(
          itemCount: controller.categories.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: controller.categories[index].name,
              price: controller.categories[index].price,
            );
          },
        ),
      ),
    );
  }
}

[dkaera]

Looks good 👍