Flutter实时数据库操作插件easy_realtime_database的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter实时数据库操作插件easy_realtime_database的使用

easy_realtime_database 是一个用于 Firebase 实时数据库操作的辅助包。本文将详细介绍如何使用该插件进行基本的数据库操作。

Widgets

Value 和 toggle

你可以通过 Value 小部件和 toggle 函数来切换实时数据库中某个节点(路径)的值。

Value(
  ref: FirebaseDatabase.instance.ref('/test/value'),
  builder: (v, r) => IconButton(
    icon: Text('Value Test: $v'),
    onPressed: () => toggle(r, 'yo'),
  ),
),

更全面的例子:

Value(
  ref: FirebaseDatabase.instance.ref('tmp/a'),
  builder: (v, r) => TextButton(
    child: Text('Value: $v'),
    onPressed: () => r.set(
      'Time : ${DateTime.now()}',
    ),
  ),
),
Value.once(
  ref: FirebaseDatabase.instance.ref('tmp/a'),
  builder: (v, r) => TextButton(
    child: Text('Value: $v'),
    onPressed: () => r.set(
      'Time : ${DateTime.now()}',
    ),
  ),
),

DatabaseLimitedListView

见示例代码。

DatabaseLimitedQueryBuilder

见示例代码。

ValueListView

使用此小部件可以列出实时数据库中某个节点的值。这可以处理大多数列出节点值的情况。

  • 如果不调用 fetchMore(index),它只会获取第一页的数据。
  • 如果只想获取第一页列表以显示最新的或最旧的数据,则不必调用 fetchMore
  • 在此示例中,使用 PageView 来列出数据。你也可以使用 ListViewGridViewCarouselView,甚至 ColumnRow 或其他任何视图。

使用 reverseQuery 可以按时间顺序从旧到新显示数据。

示例代码:

ValueListView(
  query: FirebaseDatabase.instance.ref('/tmp'),
  pageSize: 3,
  builder: (snapshot, fetchMore) {
    return PageView.builder(
      itemCount: snapshot.docs.length,
      itemBuilder: (context, index) {
        print('index: $index');
        fetchMore(index);
        return ListTile(
          contentPadding: const EdgeInsets.all(64),
          title: Text(snapshot.docs[index].key!),
        );
      },
    );
  },
  errorBuilder: (s) => Text('Error: $s'),
  loadingBuilder: () => const CircularProgressIndicator(),
  emptyBuilder: () => const Text('Empty'),
),

使用 reverseQuery 显示最旧的数据:

ValueListView(
  query: FirebaseDatabase.instance.ref('/tmp'),
  pageSize: 3,
  reverseQuery: true,
  builder: (snapshot, fetchMore) {
    return ListView.builder(
      itemCount: snapshot.docs.length,
      itemBuilder: (context, index) {
        print('index: $index');
        fetchMore(index);
        return ListTile(
          contentPadding: const EdgeInsets.all(64),
          title: Text(snapshot.docs[index].key!),
        );
      },
    );
  },
  errorBuilder: (s) => Text('Error: $s'),
  loadingBuilder: () => const CircularProgressIndicator(),
  emptyBuilder: () => const Text('Empty'),
),

更多关于Flutter实时数据库操作插件easy_realtime_database的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter实时数据库操作插件easy_realtime_database的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用easy_realtime_database插件进行实时数据库操作的代码案例。这个插件通常用于与Firebase Realtime Database进行交互。为了简单起见,我们假设你已经有一个Firebase项目并设置了Realtime Database。

首先,你需要在pubspec.yaml文件中添加easy_realtime_database依赖:

dependencies:
  flutter:
    sdk: flutter
  easy_realtime_database: ^x.y.z  # 替换为最新版本号

然后,运行flutter pub get来安装依赖。

接下来,确保你的Firebase项目配置正确,并且在你的Flutter项目中已经初始化了Firebase。这通常涉及在main.dart或类似的初始化文件中添加Firebase配置:

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';  // 创建一个文件来存放你的Firebase配置

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

firebase_options.dart文件应该包含你的Firebase配置信息,如下所示:

import 'package:firebase_core/firebase_core.dart';

final FirebaseOptions firebaseOptions = FirebaseOptions(
  apiKey: "YOUR_API_KEY",
  appId: "YOUR_APP_ID",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
);

现在,让我们看看如何使用easy_realtime_database进行实时数据库操作。以下是一个简单的示例,展示如何读取和写入数据:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // 初始化EasyRealtimeDatabase
  final db = EasyRealtimeDatabase();

  runApp(MyApp(db: db));
}

class MyApp extends StatelessWidget {
  final EasyRealtimeDatabase db;

  MyApp({required this.db});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Realtime Database Example'),
        ),
        body: RealtimeDatabaseExample(db: db),
      ),
    );
  }
}

class RealtimeDatabaseExample extends StatefulWidget {
  final EasyRealtimeDatabase db;

  RealtimeDatabaseExample({required this.db});

  @override
  _RealtimeDatabaseExampleState createState() => _RealtimeDatabaseExampleState();
}

class _RealtimeDatabaseExampleState extends State<RealtimeDatabaseExample> {
  String? value = "Initial Value";

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Current Value: $value',
            style: TextStyle(fontSize: 24),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () async {
              // 写数据到数据库
              await widget.db.set('/path/to/your/data', {'value': 'New Value'});
            },
            child: Text('Set New Value'),
          ),
          ElevatedButton(
            onPressed: () async {
              // 从数据库读取数据
              final snapshot = await widget.db.once('/path/to/your/data');
              if (snapshot.exists()) {
                setState(() {
                  value = snapshot.value['value'] as String?;
                });
              }
            },
            child: Text('Read Value'),
          ),
          ElevatedButton(
            onPressed: () async {
              // 监听数据库变化
              widget.db.on('/path/to/your/data', (snapshot) {
                if (snapshot.exists()) {
                  setState(() {
                    value = snapshot.value['value'] as String?;
                  });
                }
              });
            },
            child: Text('Listen for Changes'),
          ),
        ],
      ),
    );
  }
}

在这个示例中,我们展示了如何使用set方法写入数据,使用once方法读取数据一次,以及使用on方法进行实时监听。

请注意,你需要替换'/path/to/your/data'为你实际的数据库路径。

这个示例是一个基本的入门指南,实际项目中你可能需要处理更多的边缘情况和错误处理。希望这个示例能帮助你开始在Flutter项目中使用easy_realtime_database插件进行实时数据库操作。

回到顶部