昨天我們做DetailPage的時候有寫到這段程式碼，也認識了新的元件GestureDetector，但是現在點擊畫面還不能打開指定的網頁，因為裡面的URLLauncher()還沒做好，所以今天要接著做完最後這一部份！

1. 先到pubspec.yaml加入程式碼，再點擊Pub get，安裝可以用來幫助開啟URL的套件 url_launcher
   

2. 實作URLLauncher.dart

   • 先在helpers資料夾裡建立URLLauncher.dart檔案
   • 接著實作URLLauncher()
     
   • 然後到DetailPage.dart匯入URLLauncher.dart
     

3. 從HomePage導航至DetailsPage

   • 位置：HomePage.dart
     • 先import DetailPage.dart
       
     • 然後新增 _buildListItem 方法的 onTap 執行事件
       
       • Navigator.push( )：用來導航到新的頁面
       • context：定位當前的頁面
       • MaterialPageRoute：建立一個新的頁面路由
       • builder: (context) => new DetailPage(record: record)：MaterialPageRoute的參數，用來定義新的頁面要顯示的內容。這裡建立一個新的DetailPage頁面，並且將record傳入DetailPage來表示要顯示的聯絡人

4. 實作結果
   

到這裡這個通訊錄就大致完成了！今天學到的功能有切換不同的頁面和如何打開瀏覽器加載URL，也都是很重要的功能，之後會再重新了解、練習一下！

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