使用 Camera 來拍照吧(Flutter 篇)

最近開始使用 Flutter 來做一些開發 App 的嘗試，本身是從 iOS 出身的，也有兩年的經歷，不過開始用 Flutter 之後，開始覺得有點回不去啦！！

廢話不多說，讓我們直接開始本篇的主題吧，本篇的範例皆是由官方文件小改過來，因為只要有一點英文基礎的人應該都看得懂（應該拉），那這篇就是一個小小的學習筆記，有錯誤的話，還請多多點出，謝謝啦！

1. 在開始之前，請先在加入這三個套件

camera

提供手機上的相機套件

path_provider

提供路徑來儲存照片

path

建立一個可以在使用任何裝置的路徑

另外在 iOS 的 info.plist 新增

<key>NSCameraUsageDescription</key>
<string>將會使用您的相機</string>
<key>NSMicrophoneUsageDescription</key>
<string>將會使用您的麥克風</string>

Android 的 minSdkVersion 必須要在 21 以上

2. 取得可用的 Camera

透過 camera 套件中的 availableCameras() 來取得可用的相機

final cameras = await availableCameras();

在此之前，我建議先建立一個 Screen

再加入以下方法，當相機取得後，就推到拍照頁面

3. 建立 CameraController

一旦取得相機後，我們可以建立 CameraController，可以用來得知目前相機擷取到即時畫面，以及操作相機

1. 首先建立一個 StateFull Widget 與他的 State
2. 在 State 新增一個變數來儲存 CameraController 的狀態
3. 在 State 新增一個變數來儲存來自 CameraController.initialize() 的 Future 變數
4. 在 initState() 實例化 controller
5. 在 dispose() dispose controller

以下是官方的範例，可以試著理解以下的程式片段

4. 使用 CameraPreview 來取得相機即時回饋

一個重點是在使用 camera 前，必須等 controller 被實體化。因此在顯示 CamperaPreview 前，必須等到 _initializeControllerFuture() 被建立在先前的步驟。 使用 FutureBuilder 來達到此目的

FutureBuilder 的相關文件：

FutureBuilder class

Flutter FutureBuilder 异步UI神器

5. 利用 CameraController 來拍照

你可以使用 CameraController 的 takePicture() 方法來拍照，在這個範例使用 FloactActionButton 的 onPress() 來觸發拍照方法。 在儲存相片前，必須先實作以下方法：

1. 確認 camera 已被實例化
2. 建立一個路徑來儲存相片
3. 利用 controller 來照相，並把結果存於剛剛的路徑

利用 try/ catch 來抓出可能會發生的錯誤

6. 顯示相片

可以利用 Image Widget 來顯示剛剛拍的圖片，在剛剛的路徑是存在手機中的，因此必須先建立一個 File 以及剛剛存下的路徑。

Image.file(File(‘path/to/my/picture.png’))

完整的範例在我的 github 上，可以到那邊下載到

BoshiLee/camera_flutter

參考文件：

Take a picture using the camera

謝謝大家的耐心閱讀，如果對 Flutter 有興趣的話，歡迎一起找我討論