接著要來建最後的聯絡人資料頁面了！！
1.在lib下建立DetailsPage.dart

• 還是一樣先import，然後建立DetailPage繼承的是StatelessWidget
• 宣告一個record變數
• 建一個建構子，required表示一定要有這個參數
  

2.接著來建立介面

• 先建立一個Scaffold
  • AppBar
    • 設定標題為聯絡人的姓名
      
  • body
    • 建一個ListView
      
      • Hero( )：之前在HomePage實作裡的_buildListItem方法中已使用Hero()來放置聯絡人的頭像，現在使用tag設置同一個標籤，來實現HomePage聯絡人頭像和DetailPage聯絡人照片的動畫效果
      • GestureDetector( )：可以用來偵測使用者的手勢操作，例如：點擊、縮放等。這裡是設定只要使用者點擊此處的欄位，就會呼叫URLLauncher().launchURL(record.url)在瀏覽器中打開指定的網址。
    • 接著GestureDetector( )裡面要做的部分是這樣的：
      
      • 姓名跟地址是垂直排列，姓名+地址、電話圖案、電話號碼是水平排列
      • 這部分的程式碼如下：

                  child: new Container(
                    //邊距
                    padding: const EdgeInsets.all(32.0),
                    //水平排列
                    child: new Row(
                      children: [
                        //Expanded()用來填滿剩餘的空間
                        new Expanded(
                          //垂直排列
                          child: new Column(
                            //在水平方向上靠左對齊
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              //顯示聯絡人姓名、文字風格
                              new Container(
                                padding: const EdgeInsets.only(bottom: 8.0),
                                child: new Text(
                                  "Name: " + record.name,
                                  style: new TextStyle(
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                              //在名字的下一行顯示聯絡人地址.
                              new Text(
                                "Address: " + record.address,
                                style: new TextStyle(
                                  color: Colors.grey[500],
                                ),
                              ),
                            ],
                          ),
                        ),
                        // 在名字和地址的右邊顯示電話圖案.
                        new Icon(
                          Icons.phone,
                          color: Colors.red[500],
                        ),
                        // 在電話圖案的右邊顯示電話號碼
                        new Text(' ${record.contact}'),
                      ],
                    ),
                  ) 

• 聯絡人資料頁面實作結果：
  

今天到這裡結束！明天接著把URLLauncher類別做完，這個通訊錄就大致完成了！！

參考資料：
https://www.appcoda.com.tw/flutter-basics/