flutter - 我可以使用 Google 表格作为我的移动应用程序的数据源吗
问题描述
使用 Dart 语言和 Flutter,有没有一种方法可以使用保存在我的谷歌表格中的数据作为我的移动应用程序的源数据,使用 Dart/Flutter,而无需下载文件的离线副本?
解决方案
是的,这是可能的,通过以下步骤:
- 在 Google 表格中:
- 将考虑中的工作表发布为 csv 文件,使用文件 -> 发布到网络,确保选择选项“进行更改时自动重新发布”
- 复制 googleSheets 为 csv 连接提供的链接
- 在 Flutter/Dart 中使用以下代码:
- 从上面生成的 csv url 中读取数据
final request = await HttpClient().getUrl(Uri.parse( 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
- 将返回的字符串转换为 csv 为
rowsAsListOfValues = const CsvToListConverter().convert(csvString);
- 使用显示数据
DataTable(columns: const <DataColumn>[],rows: List.generate(rowsAsListOfValues.length - 1, (index) {return DataRow(cells: <DataCell>[DataCell())],
import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
import 'dart:async';
import 'package:csv/csv.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomePage(title: 'Flutter Demo Home Page'),
);
}
}
class HomePage extends StatefulWidget {
HomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_AppState createState() => _AppState();
}
Future<List<List<dynamic>>> fetchUserData() async {
final request = await HttpClient().getUrl(Uri.parse(
'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
final response = await request.close();
List<List<dynamic>> rowsAsListOfValues;
await for (final csvString in response.transform(const Utf8Decoder())) {
rowsAsListOfValues = const CsvToListConverter().convert(csvString);
}
return rowsAsListOfValues;
}
class _AppState extends State<HomePage> {
List<List<dynamic>> rowsAsListOfValues;
@override
void didChangeDependencies() async {
super.didChangeDependencies();
rowsAsListOfValues = await fetchUserData();
super.setState(() {}); // to update widget data
}
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
rowsAsListOfValues == null
? Text("Loading data...")
: Text(
'', // $rowsAsListOfValues
),
rowsAsListOfValues == null
? CircularProgressIndicator()
: DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text(
'City',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Branches',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: List.generate(rowsAsListOfValues.length - 1, (index) {
return DataRow(
cells: <DataCell>[
DataCell(Text('${rowsAsListOfValues[index + 1][0]}')),
DataCell(Text('${rowsAsListOfValues[index + 1][1]}')),
],
);
})),
],
),
),
);
}
}
推荐阅读
- d3.js - 如何按值而不是键对 dc.js 饼图进行排序
- python - 如何使用正则表达式从此列表中制作字典?
- c++ - 评估多项式时跳过 0 系数的有效方法是什么?
- php - Laravel - 跨数据库关系
- c# - FluentAssertions ShouldBeEquivalent 可以与 c#9 记录类型一起使用吗?
- r - 谁能告诉我为什么我一直收到错误“mtcars$am 中的错误:$ 运算符对原子向量无效”?
- python - 如何通过使用单个赋值屏蔽另一个 numpy 数组来创建新的 numpy 数组
- r - ggplot颜色条标签日期格式
- swift - macOS Swift 应用程序:imkxpc_getApplicationProperty:reply:使用不正确的属性值 4 调用,保释
- api - 谷歌家庭休息呼叫私人设备