---
# System prepended metadata

title: Flutter基礎物件

---

# Flutter基礎物件
## Flutter基礎架構
![](https://i.imgur.com/7oyNKIF.png)
## 物件種類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],
      ),
```
![](https://i.imgur.com/zNDfVty.png)
*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,
          ),
        ],
      ),
```
![](https://i.imgur.com/KoaxTF6.png)


---

## floatingActionButton
互動式按鈕
```java=
語法:
floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            狀態更新
          });
        },
```
### constraints
用來控制Container的大小
```java=
語法:
constraints: BoxConstraints(maxWidth: 100, maxHeight: 100, minWidth: 20, minHeight: 20),
```
## 導入材料
![](https://i.imgur.com/icBQNVp.png)
新增一個存放資源的資料夾
![](https://i.imgur.com/v5MoeM9.png)
開啟pubspec，按下crtl+f搜尋assets
![](https://i.imgur.com/vaGpRoO.png)
全選有關assets的程式，並按下crtl+/來取消註解
```java=
語法:
assets:
     -資料夾
     -assets/
         
     或是
         
     -檔案位置
     例如資料夾是assets，且裡面有一張tnfsh.png的圖片
     -assets/tnfsh.png
```
crtl+s儲存
![](https://i.imgur.com/FfG9t1H.png)
按下Get 
### backgroundImage(背景圖片)
使用AssetImage可以用來導入素材
```java=
語法:child: CircleAvatar(
                backgroundImage: AssetImage('assets/bird.png'),
                radius: 100.0,
              ),
```
*CircleAvatar是一種圓形展示窗小物件*
