簡介

在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進行控制， 我們需要創(chuàng)建一個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對象，也就是之前我們創(chuàng)建的對象。

最后就是調用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插件為我們提供了攝像頭的控制功能，非常簡單。

本文的例子：https://github.com/ddean2009/learn-flutter.git

到此這篇關于詳解Android Flutter如何使用相機實現拍攝照片的文章就介紹到這了,更多相關Android Flutter相機拍攝照片內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論