在飞镖上将相机从一个屏幕传递到另一个屏幕

Question

我最近开始编写有关 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 才能使其工作？

谢谢。

Answer 1

步骤 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'))