簡介
在app中使用相機肯定是再平常不過的一項事情了,相機肯定涉及到了底層原生程式碼的呼叫,那麼在flutter中如何快速簡單的使用上相機的功能呢?
一起來看看吧。
使用相機前的準備工作
flutter中為使用camera提供了一個叫做camera的外掛,我們首先需要安裝這個外掛。
安裝外掛的步驟很簡單,如下所示:
flutter pub add camera
該命令會在pubspec.xml中新增下面的內容:
dependencies:
flutter:
sdk: flutter
camera: ^0.10.0+1
除了camera之外,我們還需要對照相機拍攝的照片進行儲存,這樣我們還需要用到path_provider和path這兩個plugin。
我們使用同樣的方式對這兩個外掛進行安裝。
安裝好之後,我們就可以在flutter中的程式碼中愉快的使用camera了。
在使用camera之前,我們還需要獲取相應的許可權資訊,比如在IOS中,我們需要在 ios/Runner/Info.plist中新增下面的許可權資訊:
<key>NSCameraUsageDescription</key>
<string>flutter需要用到你的照相機</string>
在andorid中需要配合minSdkVersion>=21來使用。
在flutter中使用camera
camera外掛為我們提供了一系列的功能來方便camera的使用。
camera的使用需要遵循下面的步驟,因為現在的手機可能會有多個攝像頭,所以我們需要透過api獲取到可以使用的攝像頭列表。
接下來我們使用選中的攝像頭,進行一些控制操作,然後需要使用相應的camera檢視來展示相應的照相機影像.
最後呼叫攝像頭相關的拍攝功能進行拍攝。
聽起來好像挺複雜的,事實上只要遵照上面的順序,一切都是非常簡單的。
首先我們需要獲取可用的攝像頭列表,這個步驟是透過呼叫camera包中的availableCameras方法來實現的:
Future<List<CameraDescription>> availableCameras() async {
return CameraPlatform.instance.availableCameras();
}
availableCameras是一個非同步方法,返回的是一個Future物件,其中的值是CameraDescription列表。
CameraDescription是對camera的描述檔案:
const CameraDescription({
required this.name,
required this.lensDirection,
required this.sensorOrientation,
});
name是攝像頭的名稱,lensDirection是攝像頭面對的方向,sensorOrientation是感測器的方向,也就說你的手機是正常放置,還是選擇90度放置。
因為availableCameras是一個非同步方法,所以我們需要把它包裹在一個非同步方法中進行呼叫:
Future<void> main() async {
// 保證所有的外掛都載入完畢
WidgetsFlutterBinding.ensureInitialized();
//獲取攝像頭列表
final cameras = await availableCameras();
//拿到第一個攝像頭
final firstCamera = cameras.first;
....
這裡我們拿到了第一個攝像頭,注意,這裡的firstCamera是一個CameraDescription物件。
因為模擬器上沒有攝像頭,如果你是在模擬器上執行上面的程式的話,將會丟擲下面的異常:
[VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: Bad state: No element
#0 List.first (dart:core-patch/growable_array.dart:343:5)
為了對這個camra進行控制, 我們需要建立一個CameraController物件:
class CameraAppState extends State<CameraApp> {
late CameraController _controller;
late Future<void> _initializeControllerFuture;
@override
void initState() {
super.initState();
_controller = CameraController(
widget.camera,
ResolutionPreset.medium,
);
_initializeControllerFuture = _controller.initialize();
}
CameraController的建構函式需要一個CameraDescription物件和解析度等資訊,並且還需要進行初始化,這裡我們呼叫了它的initialize方法。
這裡的initialize方法也是一個非同步方法。
為了在CameraController初始化之後再對Camera進行使用,我們需要在返回的widget中使用FutureBuilder來構建:
body: FutureBuilder<void>(
future: _initializeControllerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return CameraPreview(_controller);
} else {
return const Center(child: CircularProgressIndicator());
}
},
)
具體要展示什麼內容呢?這裡使用的是camera包中自帶的CameraPreview元件。
CameraPreview需要傳入一個CameraController物件,也就是之前我們建立的物件。
最後就是呼叫CameraController的方法進行拍照了。我們把拍照的邏輯放在floatingActionButton中,如下所示:
floatingActionButton: FloatingActionButton(
onPressed: () async {
try {
await _initializeControllerFuture;
final image = await _controller.takePicture();
if (!mounted) return;
await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => DisplayPictureScreen(
imagePath: image.path,
),
),
);
} catch (e) {
print(e);
}
},
child: const Icon(Icons.camera_alt),
)
具體的邏輯就是呼叫controller.takePicture方法進行拍照。將拍好照的image放在一個新的widget中展示。
總結
攝像頭是app中常用的功能,flutter中的camera外掛為我們提供了攝像頭的控制功能,非常簡單。