# UI
Flutter 在 UI 編排上都是以一個單位的``小元件``（Widget）為主，``Widget`` 其中一個重要屬性為 **backGroundColor**，即元件的背景色。

Flutter 中的顏色叫做 **Colors**，透過 ``dot syntax`` 的方式去存取各種內建顏色，如 **Colors.blueGrey**

也可透過 **Color**.from``ARGB``(255, 240, 245, 248) 去建立顏色，如下：


參數範圍皆為 0~255，第一個參數是 alpha channel，即``透明度``，若為 255 則為完全不透明，後方參數分別為 R、G、B

透過點擊 const 前方的**顏色方格**，可以出現``顏色選擇器``，這與原生 iOS 開發中的 **#colorLiteral()** 雷同，iOS 如下：


## Scaffold，原義為鷹架，是一個頁面的骨幹。
骨幹中所謂的 appBar 為 APP 頁面最上方的**長方形小區塊**，與原生 iOS 中的 **Nagiagtion Bar** 是相同意思，Scaffold(**appBar:** ;body: ) 即是要在鷹架裡放入 AppBar 這個 class。

## AppBar，同 Navigation Bar
AppBar 可以修改顏色，也可以在裡頭放入 title，即 AppBar(**title:** ;**backgroundColor:** )，而任一 class 使用時的``參數順序``不需與 framework 中宣告的``參數順序``相同。



我們可以看到雖然 Scaffold 中參數， appBar 在 backgroundColor 的`前方`，但使用使可以先對 backGroundColor 賦值，再對 appBar 賦值，即沒有排列的``硬性規定``更為彈性。

## NetworkImage
**NetworkImage** 是將圖片 url 放入，就可顯示圖片，如果是要抓取圖片並顯示較為麻煩，這時候必須使用 **http 套件**。

使用 http 套件的**程式碼範例**如下：

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: const Color.fromARGB(255, 240, 245, 248),
        appBar: AppBar(
          title: Text('ZAP QDS'),
          backgroundColor: const Color.fromARGB(255, 123, 123, 3),
        ),
        body: Center(
          child: FutureBuilder(
            future: fetchRedirectedUrl('https://hackmd.io/_uploads/HJNY9p_w0.png'),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                return Image.network(snapshot.data.toString());
              }
            },
          ),
        ),
      ),
    );
  }

  Future<String> fetchRedirectedUrl(String url) async {
    final response = await http.get(Uri.parse(url));
    if (response.statusCode == 302 || response.statusCode == 301) {
      return response.headers['location']!;
    } else {
      return url;
    }
  }
}

我們必須先 import 'package:http/http.dart' as **http**;

## 添加套件工具，dependencies

而要使用 http method，首先，必須先來到 ``pubspec.yaml`` 中，我們需在 dependencies: 下加入 ``http: ^0.13.4``，來獲取 http 套件，方能在專案中使用如下：


設置完後，需在 CLI（如 Terminal）中鍵入 **flutter pub get**

### 小備註
在 Flutter 中，若是不會改變的 spec，系統會建議加上 **const**，加上後可以取消系統建議，如下：


加上 const 後，系統就不再有藍色下波浪的建議了，而這是為了 APP 的效能著想。