如何解决在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表一样
解决方法
有两种方法可以解决此问题：
- 使您的应用程序具有响应能力：在移动模式下显示特定数量的列，在平板电脑模式下显示另一列。
- 您可以像这样通过水平和垂直滚动表格来克服溢出问题：
@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')),),);
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。