5.firestore
Warning
請在Firebase的後台開啟Firestore Database
Code
逐行解釋這段 Dart 程式碼:
這行程式碼導入了
cloud_firestore 套件,這是一個 Firebase 的 Cloud Firestore 數據庫的 Dart 客戶端。
這行程式碼創建了一個
FirebaseFirestore 的實例,並將其存儲在 _firestore 變量中。
這是一個名為
addData 的函數,它創建了一個 Map,其中包含要添加到 Firestore 數據庫的數據。
_firestore
.collection('users')
.add(data)
.then((value) => print("Data added successfully"))
.catchError((error) => print("Failed to add data: $error"));
}
這段程式碼將上述的數據添加到 Firestore 數據庫的 ‘users’ 集合中。如果數據成功添加,則打印一條消息;如果出現錯誤,則捕獲該錯誤並打印一條錯誤消息。
void fetchData() {
_firestore.collection('users').get().then((QuerySnapshot querySnapshot) {
querySnapshot.docs.forEach((doc) {
print('Data: ${doc.id} => ${doc.data()}');
});
}).catchError((error) => print("Failed to fetch data: $error"));
}
這是一個名為
fetchData 的函數,它從 Firestore 數據庫的 ‘users’ 集合中獲取所有文檔。對於每個文檔,它都會打印文檔的 ID 和數據。如果在獲取數據時出現錯誤,則捕獲該錯誤並打印一條錯誤消息。
逐行解釋這段 Dart 程式碼:
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'data.dart'; // 導入 firestore_service.dart 文件
這些行程式碼導入了所需的套件和文件。包括 Firebase 的用戶認證 UI 套件、Flutter 的 Material Design 套件、Firebase 的用戶認證套件,以及你的
data.dart文件。
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return HomePage();
}
}
這是一個名為
HomeScreen 的無狀態小部件。它的 build方法返回一個 HomePage 小部件。
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
這是一個名為
HomePage 的有狀態小部件。它的 createState 方法返回一個 _HomePageState 對象。
class _HomePageState extends State<HomePage> {
@override
void initState() {
super.initState();
fetchData(); // 調用 fetchData 函數
}
這是
HomePage 小部件的狀態類。在初始化狀態時,它會調用 fetchData 函數。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [
IconButton(
icon: const Icon(Icons.person),
onPressed: () async {
var user = FirebaseAuth.instance.currentUser;
if (user != null) {
// 如果用戶已登入,則導航到 ProfileScreen
Navigator.push(
context,
MaterialPageRoute<ProfileScreen>(
builder: (context) => ProfileScreen(
appBar: AppBar(
title: const Text('User Profile'),
),
actions: [
SignedOutAction((context) {
Navigator.of(context).pop();
})
],
children: [
const Divider(),
Padding(
padding: const EdgeInsets.all(2),
child: AspectRatio(
aspectRatio: 1,
child: Image.asset('flutterfire_300x.png'),
),
),
],
),
),
);
} else {
// 如果用戶未登入,則顯示一個提示
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('請先登入')),
);
}
},
)
],
automaticallyImplyLeading: false,
),
body: Center(
child: Column(
children: [
Image.asset('dash.png'),
IconButton(
onPressed: () {
addData();
},
icon: Icon(Icons.add)),
IconButton(
onPressed: () {
fetchData();
},
icon: Icon(Icons.remove)),
Text(
'Welcome!',
style: Theme.of(context).textTheme.displaySmall,
),
const SignOutButton(),
],
),
),
);
}
}
這是
_HomePageState 的 build方法。它返回一個 Scaffold 小部件,該小部件包含一個 AppBar 和一個 Center 小部件。AppBar 包含一個 IconButton,該按鈕會檢查用戶是否已登入,並根據用戶的登入狀態進行導航或顯示提示。Center 小部件包含一個 Column 小部件,該小部件包含一個圖像、兩個按鈕(用於添加和獲取數據)、一個歡迎文本和一個登出按鈕。
請試著動手作
請嘗試將自己想要的資料傳入firestore裡頭。並在獲取回來。
Last update :
13 novembre 2024
Created : 13 novembre 2024
Created : 13 novembre 2024