Flutter-从数据库中获取记录并在ListView Builder中显示

Question

我正在开发Flutter项目并使用Sqflite数据库。我设法将数据保存在db中。现在，我试图基于表名从数据库中获取所有记录的列表，并将其显示在“ ListView.builder”中。

database_helper.dart

Future<List> getAllRecords(String dbTable) async {
    var dbClient = await db;
    var result = await dbClient.rawQuery("SELECT * FROM $dbTable");

    return result.toList();
}

employee_list.dart

import 'package:flutter/material.dart';
import 'package:flutter_with_db_single_helper/helpers/database_helper.dart';

var db = new DatabaseHelper();
Future<List> _users = db.getAllRecords("tabEmployee"); // CALLS FUTURE

class EmployeesListScreen extends StatefulWidget {
  @override
  _EmployeesListScreenState createState() => _EmployeesListScreenState();
}

class _EmployeesListScreenState extends State<EmployeesListScreen> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List Of Employees'),
      ),
      body: ListView.builder(
        // itemCount: _users.length,
        itemBuilder: (_, int position) {
          return Card(
            child: ListTile(
              title:
                  Text("Employee Name: "), // EMPLOYEE NAME TO BE DISPLAYED HERE
            ),
          );
        },
      ),
    );
  }
}

我哪里做错了？如何在列表中显示所有数据库表记录？

Answer 1

您可以使用FutureBuilder来获取和显示数据：

        class _EmployeesListScreenState extends State<EmployeesListScreen> {
          var db = new DatabaseHelper(); // CALLS FUTURE

          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(
                title: Text('List Of Employees'),
              ),
              body: FutureBuilder<List>(
                future: db.getAllRecords("tabEmployee"),
                initialData: List(),
                builder: (context, snapshot) {
                  return snapshot.hasData
                      ? ListView.builder(
                          itemCount: snapshot.data.length,
                          itemBuilder: (_, int position) {
                            final item = snapshot.data[position];
                            //get your item data here ...
                            return Card(
                              child: ListTile(
                                title: Text(
                                    "Employee Name: " + snapshot.data[position].row[1]),
                              ),
                            );
                          },
                        )
                      : Center(
                          child: CircularProgressIndicator(),
                        );
                },
              ),
            );
          }
        }