# Flutter 專案結構
# 與
# 預設程式碼解析
---
## 專案結構
由```flutter create <app name>```創建新的專案
:::danger
專案路徑不能有中文、空格
:::
----
----
利用 Android Studio 將專案開啟
開啟後應該會看到以下結構 :
----
目錄名稱|說明
-|-
.dart_tool|紀錄Dart工具函示庫所在的位置和資訊
andriod|Android 原生程式碼
ios|iOS 原生程式碼
lib|Flutter程式撰寫位置
web|Web 平台相關程式，如html、javascript等等
pubspec.yaml|當前專案的設定檔，管理依賴與資源
(build)|運行flutter期間所產生的檔案
---
## 預設程式碼解析
----
main.dart :
```dart=
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('You have pushed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
```
----
### 導入library
```dart
import 'package:flutter/material.dart';
```
import表示導入Material UI元件庫。
----
### 應用入口
```
void main() {
runApp(const MyApp());
}
//也可以寫成
void main=>runApp(const MyApp());
```
runApp會接受一個Widget作為參數，並將他作為Widget Tree的根節點。
----
根節點通常會使用 MaterialApp 或 CupertinoApp。
:::info
MaterialApp 是Material Design風格的根Widget，可以輕鬆設置應用的核心屬性，如 :
1. 應用名稱，但比較明顯的影響只有Web的標籤頁
2. 主題設置
3. 首頁定義
4. 路由管理
:::
----
### MyApp (StatelessWidget)
```
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
```
----
### MyHomePage (StatefulWidget)
```
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
```
----
### _MyHomePageState (State)
```
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('You have pushed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
```
---
## 運行程式碼
1. 在 Device Manager 啟動模擬器。
3. 當 Running Device 出現模擬器時，點選上方綠色三角形符號以啟動App。
4. 如果有修改程式碼，可以直接按 Ctrl + S 存檔，App就會讀取最新程式碼(也可以點選右上方閃電符號的按鈕)，這個動作叫做hot reload。
{"title":"Flutter 專案結構","contributors":"[{\"id\":\"6d6e3ba2-6820-4c6f-9117-f09bccc7f7aa\",\"add\":4197,\"del\":0}]"}