Flutter Web：Firestore CRUD
更新 [2020年8月21日]：cloud_firestore 重大变更
现在，所有 Flutter Firebase 文档都在新链接中：https://firebase.flutter.dev/docs/overview
首先，在 pubspec.yaml 文件中导入最新的 cloud_firestore 和 firebase core 依赖项：
In pubspec.yaml...
dependencies:
cloud_firestore: <latest version>
firebase_core: <latest version>
其次，在 web/index.html 文件中添加 Firebase 和 Firestore JS SDK：
In index.html...
<body>
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-firestore.js"></script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
第三，初始化 Firebase，同样需要在 index.html 文件中使用 Firebase 密钥（可以在 Firebase 设置中找到）：
In index.html...
<body>
<!-- Previously loaded Firebase SDKs -->
<!-- ADD THIS BEFORE YOUR main.dart.js SCRIPT -->
<script>
// TODO: Replace the following with your app's Firebase project configuration.
// See: https://support.google.com/firebase/answer/7015592
var firebaseConfig = {
apiKey: "...",
authDomain: "[YOUR_PROJECT].firebaseapp.com",
databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
projectId: "[YOUR_PROJECT]",
storageBucket: "[YOUR_PROJECT].appspot.com",
messagingSenderId: "...",
appId: "1:...:web:...",
measurementId: "G-..."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<!-- END OF FIREBASE INIT CODE -->
<script src="main.dart.js"></script>
</body>
最后，在你的 Flutter main.dart 文件中初始化 Firebase。
import 'package:flutter/material.dart';
// Import the firebase_core plugin
import 'package:firebase_core/firebase_core.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
// Create the initilization Future outside of `build`:
final Future<FirebaseApp> _initialization = Firebase.initializeApp();
@override
Widget build(BuildContext context) {
return FutureBuilder(
// Initialize FlutterFire:
future: _initialization,
builder: (context, snapshot) {
// Check for errors
if (snapshot.hasError) {
return SomethingWentWrong();
}
// Once complete, show your application
if (snapshot.connectionState == ConnectionState.done) {
return MyAwesomeApp();
}
// Otherwise, show something whilst waiting for initialization to complete
return Loading();
},
);
}
}
以上代码来自FlutterFire 文档。
瞧！现在您可以像往常一样，随时在您的移动应用和 Web 应用中使用 Firestore CRUD 功能了。
import 'package:cloud_firestore/cloud_firestore.dart';
FirebaseFirestore.instance.collection('diaries').add(data)
FirebaseFirestore.instance.collection('diaries').doc('monday').update(data)
FirebaseFirestore.instance.collection('diaries').doc('monday').delete()