# Flutter基礎物件
## Flutter基礎架構
## 物件種類StatelessWidget VS StatefulWidget
StatelessWidget不會改變
```java=
語法:
stless
```
StatefulWidget可隨時間改變
```java=
語法:
stful
```
---
## Scaffold(鷹架)
Scafflod是flutter中的一種骨架，可以在裡面放上很多的小物件(Widget)
```java=
語法:
Scaffold(
),
```
## appbar(App標題)
appbar是APP頁面上方的標籤
```java=
語法:
appBar: AppBar(
title: Text(
"Hello world",
style: TextStyle(
fontSize: 80,
),
),
centerTitle: true,
backgroundColor: Colors.teal[100],
),
```
*Hello world的部分*
### title(標題文字)
title是appbar上的標題
```java=
語法:
appBar: AppBar(
title: Text('Hello world'),
),
```
### centerTitle(文字置中)
centerTitle可以用來控制title要不要置中
```java=
語法:
appBar: AppBar(
title: Text('Hello world'),
centerTitle: true/false,
),
```
---
## backgroundColor(背景顏色)
backgroundColor用來填充各種大結構的顏色
例如: Scaffold、AppBar
```java=
語法:
appbar: AppBar(
backgroundColor: Colors.grey[400],
//(你要的顏色)[顏色深度]
),
```
---
## body(中間物件)
## child(子物件)
child是用在各個物件中加入子物件
## Row(橫向架構)
Row是一種橫向架構
```java=
語法:
body: Row(
children: [
Text('Hello world'),
],
),
```
### mainAxisAlignment
mainAxisAlignment用來控制Row上的小物件在X軸上的位置
```java=
語法:
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Hello world'),
],
),
```
### crossAxisAlignment
crossAxisAlignment用來控制Row上的小物件在Y軸上的位置
```java=
語法:
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Hello world'),
],
),
```
## Column(縱向架構)
同Row，只不過是直行
## Icon(圖示)
圖示
```java=
語法:
child: Icon(Icons.add),
```
## Text
Text就是基本的文字物件
```java=
語法(基本):
title/child: Text('Hello world'),
語法(進階):
title/child: Text(
'Hello world',
style: TextStyle(
),
),
```
### fontWeight
fontWeight是用來控制字體粗細
```java=
語法:
child: Text(
'Hello world',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
```
### fontSize
fontSize是用來控制字體大小
```java=
語法:
child: Text(
'Hello world',
style: TextStyle(
fontSize: 20.0,
),
),
```
### letterSpacing
letterSpacing是用來控制字體間距
```java=
語法:
child: Text(
'Hello world',
style: TextStyle(
letterSpacing: 2.0,
),
),
```
## Container
用來包裝很多物件的容器
```java=
語法:
body: Column(
children: [
Container(
),
],
),
```
## color
color是用來控制各物件的顏色
例如: Container、Text...
```java=
語法:
child: Text(
'Hello world',
style: TextStyle(
color: Colors.grey[400],
),
),
```
## 綜合應用
```java=
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
padding: EdgeInsets.all(50),
color: Colors.blueAccent,
child: Text(
"hi",
style: TextStyle(
fontSize: 100,
color: Colors.amber,
fontWeight: FontWeight.w700,
),
),
),
Container(
constraints: BoxConstraints(maxWidth: 100, maxHeight: 100, minWidth: 20, minHeight: 20),
color: Colors.purple,
child: Row(
children: [
Text("hello"),
Icon(
Icons.mail,
),
],
),
alignment: Alignment.bottomCenter,
),
Text(
"hello",
style: TextStyle(
fontSize: 100,
),
),
Icon(
Icons.add,
color: Colors.red,
size: 50,
),
],
),
```
---
## floatingActionButton
互動式按鈕
```java=
語法:
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
狀態更新
});
},
```
### constraints
用來控制Container的大小
```java=
語法:
constraints: BoxConstraints(maxWidth: 100, maxHeight: 100, minWidth: 20, minHeight: 20),
```
## 導入材料
新增一個存放資源的資料夾
開啟pubspec，按下crtl+f搜尋assets
全選有關assets的程式，並按下crtl+/來取消註解
```java=
語法:
assets:
-資料夾
-assets/
或是
-檔案位置
例如資料夾是assets，且裡面有一張tnfsh.png的圖片
-assets/tnfsh.png
```
crtl+s儲存
按下Get
### backgroundImage(背景圖片)
使用AssetImage可以用來導入素材
```java=
語法:child: CircleAvatar(
backgroundImage: AssetImage('assets/bird.png'),
radius: 100.0,
),
```
*CircleAvatar是一種圓形展示窗小物件*
Sign in with Wallet
Connect another wallet