Color 與 decoration

decoration 與 color 二個屬性不能同時存在，二者只能選一個。

1
2
3
4
5
6
7
8
9

Container(
    decoration: BoxDecoration(
      color: Colors.red
    ),
    width: 100,
    height: 100,
    color: Colors.red,
    child: Text("底部"),
)

img

Color只有背景顏色的功能。

但decoration可以有背景顏色、邊框、邊框顏色、圓角、漸層..等等特效。

BoxDecoration

1
2
3
4
5
6
7
8
9
10
11
12

Container(
    decoration: BoxDecoration(
      // 顏色
      color: Colors.red,
      // 圓角
      borderRadius: BorderRadius.circular(40),
    ),
    width: 100,
    height: 100,
    alignment: Alignment.center,
    child: Text("底部"),
)

InputDecoration

img

1
2
3
4
5
6
7
8
9
10
11
12
13

TextField(
  decoration: InputDecoration(
      // 內部間距
      contentPadding: EdgeInsets.only(left: 20.0, right: 10),
      hintText: "請輸入姓名",
      // 輸入方塊背景顏色
      fillColor: Colors.grey,
      filled: true,
      border: OutlineInputBorder(
      	  // 無邊框
          borderSide: BorderSide.none,
          // 圓角
          borderRadius: BorderRadius.circular(10.0))))

results matching ""

    No results matching ""