首页 > 解决方案 > 在飞镖上将相机从一个屏幕传递到另一个屏幕

问题描述

我最近开始编写 flutter 和 dart 的代码,我正在努力学习它。在开发应用程序时,我试图将第一个屏幕上的一个按钮链接到另一个屏幕,在该屏幕上我启动相机以拍照。

Future<void> main() async {
  // Ensure that plugin services are initialized so that `availableCameras()`
  // can be called before 'runApp()'
  WidgetsFlutterBinding.ensureInitialized();

  // Obtain a list of the available cameras on the device.
  final cameras = await availableCameras();

  // Get a specific camera from the list of available cameras.
  final firstCamera = cameras.first;

  runApp(
    MaterialApp(
      theme: ThemeData.dark(),
      title: "Ipm-p2",
      home: Scaffold(
        appBar: AppBar(title: const Text("Ipm-p2")),
        body: MyStatelessWidget(firstCamera),
      ),
      /*TakePictureScreen(
        // Pass the appropriate camera to the TakePictureScreen widget.
        camera: firstCamera,
      ),*/
    ),
  );
}

MyStatelessWidget 是我的第一个屏幕,其中有启动相机的按钮:

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget(CameraDescription firstCamera, {Key key, this.camera}) : super(key: key);

  final CameraDescription camera;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          const SizedBox(height: 30),
          RaisedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => TakePictureScreen(camera: this.camera))
              );
            },
            child: const Text('Enabled Button', style: TextStyle(fontSize: 20)),
          ),
        ],
      ),
    );
  }
}

我的问题是,当我启动应用程序并点击按钮时,它会将我带到相机屏幕,但相机无法工作。我如何需要通过 firstCamera 才能使其工作?

谢谢。

标签: androidflutterdartcamera

解决方案


步骤 1->添加所需的依赖项。

dependencies:
  flutter:
    sdk: flutter
  camera:
  path_provider:
  path:

步骤 2->获取可用摄像机的列表。

WidgetsFlutterBinding.ensureInitialized();

// Obtain a list of the available cameras on the device.
final cameras = await availableCameras();
// Get a specific camera from the list of available cameras.
final firstCamera = cameras.first;

步骤 3->创建并初始化 CameraController。

此过程建立与设备摄像头的连接,允许您控制摄像头并显示摄像头馈送的预览。

// A screen that takes in a list of cameras and the Directory to store images.
class TakePictureScreen extends StatefulWidget {
    final CameraDescription camera;

    const TakePictureScreen({
    Key key,
    @required this.camera,
      }) : super(key: key);

    @override
    TakePictureScreenState createState() => TakePictureScreenState();
}

class TakePictureScreenState extends State<TakePictureScreen> {
  // Add two variables to the state class to store the CameraController and
  // the Future.
  CameraController _controller;
  Future<void> _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    // To display the current output from the camera,
    // create a CameraController.
    _controller = CameraController(
      // Get a specific camera from the list of available cameras.
      widget.camera,
      // Define the resolution to use.
      ResolutionPreset.medium,
    );

    // Next, initialize the controller. This returns a Future.
    _initializeControllerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    // Dispose of the controller when the widget is disposed.
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Fill this out in the next steps.
  }
}

第 4 步->使用 CameraPreview 显示相机的提要。

您可以使用 CameraController 使用 takePicture() 方法拍照。在此示例中,创建一个 FloatingActionButton,当用户点击按钮时使用 CameraController 拍照。

步骤 5->使用 CameraController 拍照。

您可以使用 CameraController 使用 takePicture() 方法拍照。在此示例中,创建一个 FloatingActionButton,当用户点击按钮时使用 CameraController 拍照。

FloatingActionButton(
  child: Icon(Icons.camera_alt),
  // Provide an onPressed callback.
  onPressed: () async {
    // Take the Picture in a try / catch block. If anything goes wrong,
    // catch the error.
    try {
      // Ensure that the camera is initialized.
      await _initializeControllerFuture;

      // Construct the path where the image should be saved using the path
      // package.
      final path = join(
        // Store the picture in the temp directory.
        // Find the temp directory using the `path_provider` plugin.
        (await getTemporaryDirectory()).path,
        '${DateTime.now()}.png',
      );

      // Attempt to take a picture and log where it's been saved.
      await _controller.takePicture(path);
    } catch (e) {
      // If an error occurs, log the error to the console.
      print(e);
    }
  },
)

步骤 6->显示带有图像小部件的图片。

如果您成功拍照,则可以使用图像小部件显示保存的照片。在这种情况下,图片将作为文件存储在设备上。

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

推荐阅读