| import 'package:flutter/material.dart';
import 'auth_gate.dart';
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const AuthGate(),
);
}
}
|
這段代碼是一個使用 Flutter 框架構建的應用程序的入口：
-
import 'package:flutter/material.dart';：這行代碼是導入 Flutter 框架的 Material 組件庫，它包含了構建應用程序所需的各種視覺組件和功能。
-
import 'auth_gate.dart';：這行代碼是導入自定義的 auth_gate.dart 文件，該文件可能包含了應用程序的身份驗證網關或其他自定義組件。
-
class MyApp extends StatelessWidget { ... }：這是一個名為 MyApp 的類，它繼承自 StatelessWidget 類。在 Flutter 中，一個應用程序通常從一個 Widget 開始構建，而 StatelessWidget 是一個不可變的 Widget，意味著一旦構建完成，就不能更改其狀態或屬性。
-
const MyApp({super.key});：這是 MyApp 類的構造函數，使用了可選的參數 key，這個參數通常用於在 Widget 樹中標識不同的 Widget。
-
Widget build(BuildContext context) { ... }：這是 StatelessWidget 的一個必需的方法，用於構建 Widget 的 UI。BuildContext 是一個包含有關 Widget 在樹中位置和主題的信息的對象。
-
return MaterialApp(...);：這是一個 MaterialApp Widget 的實例，它是一個定義了應用程序 UI 的頂層 Widget。它包含了主題和應用程序的主頁。
-
theme: ThemeData(...)：這里設置了應用程序的主題，包括顏色方案和是否使用 Material Design 3.0。
-
home: const AuthGate(),：這里指定了應用程序的主頁為一個名為 AuthGate 的 Widget，通常是用戶登錄或身份驗證的界面。
這段代碼的作用是創建一個基本的 Flutter 應用程序，並指定了應用程序的主題和主頁。
| import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:firebase_ui_oauth_google/firebase_ui_oauth_google.dart';
import 'package:flutter/material.dart';
import 'home.dart';
import 'main.dart';
class AuthGate extends StatelessWidget {
const AuthGate({super.key});
@override
Widget build(BuildContext context) {
return StreamBuilder<User?>(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return SignInScreen(
providers: [
EmailAuthProvider(),
GoogleProvider(clientId: clientId),
],
headerBuilder: (context, constraints, shrinkOffset) {
return Padding(
padding: const EdgeInsets.all(20),
child: AspectRatio(
aspectRatio: 1,
child: Image.asset('assets/flutterfire_300x.png'),
),
);
},
subtitleBuilder: (context, action) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: action == AuthAction.signIn
? const Text('Welcome to FlutterFire, please sign in!')
: const Text('Welcome to Flutterfire, please sign up!'),
);
},
footerBuilder: (context, action) {
return const Padding(
padding: EdgeInsets.only(top: 16),
child: Text(
'By signing in, you agree to our terms and conditions.',
style: TextStyle(color: Colors.grey),
),
);
},
);
}
return const HomeScreen();
},
);
}
}
|
這段 Dart 程式碼定義了一個名為
AuthGate 的 Flutter widget，該 widget 是
StatelessWidget 的子類，這意味著它的 UI 在生命週期內不會改變。
在 build 方法中，我們返回一個 StreamBuilder widget，它會根據 FirebaseAuth.instance.authStateChanges() 的結果來構建 UI。authStateChanges() 是一個 Stream，當 Firebase Auth 的認證狀態發生變化時，它會發出事件。
StreamBuilder 的 builder 方法會根據 Stream 的最新事件來構建 UI。如果 Stream 尚未發出事件（即 snapshot.hasData 為 false），則返回一個 SignInScreen widget，該 widget 提供用戶登入的界面。在這個界面中，用戶可以選擇使用 Email 或 Google 進行登入。
如果 Stream 已經發出事件，這意味著用戶的認證狀態已經確定，則返回 HomeScreen widget，這是用戶已登入後看到的主頁面。
這個 AuthGate widget 的主要功能是根據用戶的認證狀態來決定顯示哪個界面。如果用戶未登入，則顯示登入界面；如果用戶已登入，則顯示主頁面。
| import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [
IconButton(
icon: const Icon(Icons.person),
onPressed: () {
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'),
),
),
],
),
),
);
},
)
],
automaticallyImplyLeading: false,
),
body: Center(
child: Column(
children: [
Image.asset('dash.png'),
Text(
'Welcome!',
style: Theme.of(context).textTheme.displaySmall,
),
const SignOutButton(),
],
),
),
);
}
}
|
這段 Dart 程式碼定義了一個名為
HomeScreen 的 Flutter widget，該 widget 是
StatelessWidget 的子類，這意味著它的 UI 在生命週期內不會改變。
在 build 方法中，我們返回一個 Scaffold widget，這是一個基本的視覺布局結構，包含了應用程序的主要元素，如 appBar 和 body。
appBar 是一個 AppBar widget，其中包含一個 IconButton。當按下這個按鈕時，會使用 Navigator.push 方法導航到 ProfileScreen 頁面。ProfileScreen 頁面包含一個 AppBar，一個 SignedOutAction，以及一個顯示圖片的 AspectRatio widget，請注意ProfileScreen是Firebase的package提供的widget
body 是一個 Center widget，其中包含一個 Column widget。Column widget 包含一個圖片，一個歡迎文字，以及一個 SignOutButton。
這個 HomeScreen widget 的主要功能是提供一個主頁面，用戶可以從這裡導航到他們的個人資料頁面，或者登出。
| import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'app.dart';
import 'firebase_options.dart';
// TODO(codelab user): Get API key
const clientId = 'YOUR_CLIENT_ID';
void main() async {
WidgetsFlutterBinding.ensureInitialized(); // 初始化 Flutter 應用程序綁定
await Firebase.initializeApp( // 初始化 Firebase 應用
options: DefaultFirebaseOptions.currentPlatform, // 使用默認 Firebase 選項
);
runApp(const MyApp()); // 運行我們的 Flutter 應用程序
}
|
這段代碼是一個Flutter應用程序的主入口：
-
import 'package:firebase_core/firebase_core.dart'; 和 import 'package:flutter/material.dart';：這些語句用於導入Flutter和Firebase庫，以便我們可以使用它們的功能。
-
WidgetsFlutterBinding.ensureInitialized();：這行代碼確保Flutter應用程序已經初始化綁定。這是因為Flutter應用程序在運行之前需要綁定到操作系統。
-
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);：這是初始化Firebase應用程序的關鍵部分。我們使用await關鍵字等待初始化完成，以確保我們在繼續之前已經準備好使用Firebase。
-
const clientId = 'YOUR_CLIENT_ID';：這是一個常量，存儲著你的客戶端ID。在這個示例中，你需要替換YOUR_CLIENT_ID為你的實際客戶端ID。
