在Flutter中以表格形式查看FIrestore数据

问题描述

我目前正在一个项目中，需要检索一些Firestore并将其作为表查看 我已经尝试过数据表，但是单元格正在溢出 一共有七个固定列，n个没有行。 有人可以帮我吗？

我的整个代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'dart:async';
import 'package:intl/intl.dart';

class view extends StatefulWidget {
  @override
  _view createState() => _view();
}

class _view extends State<view> {
  Future getPosts() async{
    var firestore = Firestore.instance;
    QuerySnapshot qn = await firestore.collection('data').getDocuments();
    return qn.documents;
  }


  DateTime Date = DateTime.now();
  var i = 0;
  Future<void> _Date(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,initialDate: Date,firstDate: DateTime(2015,8),lastDate: DateTime(2101));
    if (picked != null && picked != Date)
      setState(() {
        Date = picked;
      });

  }
  String dropdownValue = '';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData.light(),home: Scaffold(
            backgroundColor: Colors.white,appBar: AppBar(
              backgroundColor: Color(0xFF11249F),title: new Text("VIEW DATA",style: new TextStyle(color: Colors.white),),body: SingleChildScrollView(
                child: Column(
                    children: <Widget>[
                      SizedBox(
                        height: 20,Row(
                          children: <Widget>[
                            SizedBox(width: 10,Container(
                              child: Text ('Select Factory',style: TextStyle(
                                  fontSize: 14.5,fontFamily: "Quando",fontWeight: FontWeight.bold,color: Colors.deepPurple
                              ),Container(
                              margin: EdgeInsets.symmetric(horizontal: 20),padding: EdgeInsets.symmetric(vertical: 10,horizontal: 20),height: 50,width: 200,decoration: BoxDecoration(
                                color: Colors.white,borderRadius: BorderRadius.circular(25),border: Border.all(
                                  color: Color(0xFFE5E5E5),child:Row(
                                  children: <Widget>[
                                    SizedBox(width: 20),Expanded(
                                      child: DropdownButton(value: dropdownValue,isExpanded: true,icon: Icon(Icons.arrow_downward),style: TextStyle(fontSize: 13,fontWeight: FontWeight.w500,color: Colors.deepPurple),onChanged: (String newValue) {
                                          setState(() {
                                            dropdownValue = newValue;
                                          });
                                        },items: <String>['','Vapi','Masat']
                                            .map<DropdownMenuItem<String>>((String value) {
                                          return DropdownMenuItem<String>(
                                            value: value,child: Text(value),);
                                        }).toList(),]
                              ),]
                      ),SizedBox(
                        height: 30,Column(

                          children: <Widget>[
                            Row(
                              children: <Widget>[
                                SizedBox(width: 10,Container(

                                  child: Text('Date',style: TextStyle(
                                      fontSize: 14.5,color: Colors.deepPurple
                                  ),SizedBox(width: 80,Text("${Date.toLocal()}".split(' ')[0],style: TextStyle(
                                    fontSize: 14.5,color: Colors.deepPurple
                                ),SizedBox(width: 20.0,RaisedButton(

                                  onPressed: () => _Date(context),textColor: Colors.white,padding: const EdgeInsets.all(0.0),child:Container(
                                    decoration: const BoxDecoration(
                                        gradient: LinearGradient(
                                            colors: <Color>[
                                              Color(0xFF0D47A1),Color(0xFF1976D2),Color(0xFF42A5F5),]
                                        )
                                    ),padding: const EdgeInsets.all(10.0),child:
                                    const Text('Select Date',style: TextStyle(fontSize: 14)),],SizedBox(height: 30,Container(
                                child: FutureBuilder(
                                    future: getPosts(),builder: (context,snapshot) {
                                      if (snapshot.connectionState == ConnectionState.waiting) {
                                        return Center(
                                          child: Text('Loading...',style: TextStyle(
                                              fontSize: 14.5,color: Colors.deepPurple
                                          ),);
                                      }
                                      else {
                                        String formattedDate = DateFormat('yyyy-MM-dd').format(Date);
                                        return new SizedBox(
                                            height: 1000,child :GridView.builder(
                                                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                                    crossAxisCount: (Orientation == Orientation.landscape) ? 7 : 7),itemCount: snapshot.data.length,itemBuilder: (context,index) {
                                                  if (snapshot.data[index].data['Date'] ==
                                                      formattedDate &&
                                                      snapshot.data[index].data['Plant'] ==
                                                          dropdownValue) {
                                                    i++;
                                                    return DataTable(
                                                      columns: [
                                                        DataColumn(
                                                          label: Text(
                                                            "Work Centre",style: TextStyle(
                                                            fontStyle:FontStyle.italic
                                                          ),)
                                                        ),DataColumn(
                                                            label: Text(
                                                              "Work Centre",style: TextStyle(
                                                                fontStyle:FontStyle.italic
                                                            ),rows: [
                                                        DataRow(
                                                          cells: <DataCell>[
                                                            DataCell(Text('Sarah')),DataCell(Text('19')),DataCell(Text('Student')),DataCell(Text('Sarah')),)
                                                      ],);
                                                      }
                                                  else {
                                                    return Container();
                                                  }
                                                }
                                            ));
                                      }
                                    }  )
                            )
                          ]
                      )
                    ]
                )
            )
        ));
  }
}

问题：Screenshot

PS：写在行中的数据是临时的，稍后我将对其进行更改以从Firestore中获取数据，我需要7列＆n行，就像excel表一样

解决方法

有两种方法可以解决此问题：

1. 使您的应用程序具有响应能力：在移动模式下显示特定数量的列，在平板电脑模式下显示另一列。
2. 您可以像这样通过水平和垂直滚动表格来克服溢出问题：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),body: SingleChildScrollView(
        child: SizedBox(
          width: double.infinity,height: MediaQuery.of(context).size.height,child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,child: DataTable(
              columns: [
                DataColumn(label: Text('RollNo')),DataColumn(label: Text('Name')),DataColumn(label: Text('Class')),DataColumn(label: Text('Hello')),DataColumn(label: Text('World')),],rows: [
                DataRow(cells: [
                  DataCell(Text('1')),DataCell(Text('Arya')),DataCell(Text('6')),]),DataRow(cells: [
                  DataCell(Text('12')),DataCell(Text('John')),DataCell(Text('9')),DataRow(cells: [
                  DataCell(Text('42')),DataCell(Text('Tony')),DataCell(Text('8')),),);
  }