# FlutterでのCameraプラグインを使用した撮影後のプレビュー画面表示方法

## 目次

1. イントロダクション

2. 必要な準備

   - 2-1 Flutter環境のセットアップ

   - 2-2 Cameraプラグインのインストール

3. 基本的なCameraの使用方法

   - 3-1 CameraControllerの設定

   - 3-2 カメラの初期化

   - 3-3 撮影の実行

4. 撮影後のプレビュー画面の表示

   - 4-1 撮影画像の取得

   - 4-2 プレビュー画面の作成

   - 4-3 画像の表示と保存

5. 完成したコードのサンプル

6. まとめ

## 1. イントロダクション

Flutterはクロスプラットフォームのアプリ開発フレームワークとして、多くのデバイスやOSに対応しています。このチュートリアルでは、Flutterの`camera`プラグインを活用して、写真撮影後にプレビュー画面を表示する方法を学びます。

## 2. 必要な準備

### 2-1 Flutter環境のセットアップ

Flutterを使ったアプリ開発を始めるには、まずFlutter SDKをインストールしてください。また、適切なコードエディタとしてAndroid StudioやVisual Studio Codeを推奨します。Flutter環境の詳細については、[公式ドキュメント](https://flutter.dev/docs/get-started/install)を参照してください。

### 2-2 Cameraプラグインのインストール

次に、`camera`プラグインを`pubspec.yaml`ファイルに追加します。

```yaml

dependencies:

  flutter:

    sdk: flutter

  camera: ^0.10.0+4

```

## 3. 基本的なCameraの使用方法

### 3-1 CameraControllerの設定

まず、`CameraController`を設定し、使用可能なカメラをリストします。

```dart

import 'package:camera/camera.dart';

List<CameraDescription> cameras;

Future<void> main() async {

  WidgetsFlutterBinding.ensureInitialized();

  cameras = await availableCameras();

}

```

### 3-2 カメラの初期化

次に、選択したカメラを初期化し、ビューに表示します。

```dart

class CameraExampleHome extends StatefulWidget {

  @override

  _CameraExampleHomeState createState() => _CameraExampleHomeState();

}

class _CameraExampleHomeState extends State<CameraExampleHome> {

  CameraController controller;

  @override

  void initState() {

    super.initState();

    controller = CameraController(cameras[0], ResolutionPreset.high);

    controller.initialize().then((_) {

      if (!mounted) return;

      setState(() {});

    });

  }

  @override

  void dispose() {

    controller?.dispose();

    super.dispose();

  }

  @override

  Widget build(BuildContext context) {

    if (!controller.value.isInitialized) {

      return Container();

    }

    return AspectRatio(

      aspectRatio: controller.value.aspectRatio,

      child: CameraPreview(controller),

    );

  }

}

```

### 3-3 撮影の実行

ユーザーがシャッターボタンを押した際に写真を撮影します。

```dart

Future<void> takePicture() async {

  if (!controller.value.isInitialized) {

    print('Controller is not initialized');

    return;

  }

  final XFile picture = await controller.takePicture();

  // プレビュー画面用に画像パスを保存

  Navigator.push(

    context,

    MaterialPageRoute(

      builder: (context) => PreviewScreen(imagePath: picture.path),

    ),

  );

}

```

## 4. 撮影後のプレビュー画面の表示

### 4-1 撮影画像の取得

カメラで撮影した画像をプレビュー用に取得します。

### 4-2 プレビュー画面の作成

新たにプレビュー画面を作成し、画像を表示します。

```dart

class PreviewScreen extends StatelessWidget {

  final String imagePath;

  const PreviewScreen({Key key, this.imagePath}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('プレビュー')),

      body: Image.file(File(imagePath)),

    );

  }

}

```

### 4-3 画像の表示と保存

ユーザーは画像を確認し、保存や再撮影が可能になります。

## 5. 完成したコードのサンプル

```dart

import 'package:flutter/material.dart';

import 'package:camera/camera.dart';

import 'dart:async';

import 'dart:io';

List<CameraDescription> cameras;

Future<void> main() async {

  WidgetsFlutterBinding.ensureInitialized();

  cameras = await availableCameras();

  runApp(CameraApp());

}

class CameraApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: ThemeData.dark(),

      home: CameraExampleHome(),

    );

  }

}

class CameraExampleHome extends StatefulWidget {

  @override

  _CameraExampleHomeState createState() => _CameraExampleHomeState();

}

class _CameraExampleHomeState extends State<CameraExampleHome> {

  CameraController controller;

  @override

  void initState() {

    super.initState();

    controller = CameraController(cameras[0], ResolutionPreset.high);

    controller.initialize().then((_) {

      if (!mounted) return;

      setState(() {});

    });

  }

  @override

  void dispose() {

    controller?.dispose();

    super.dispose();

  }

  @override

  Widget build(BuildContext context) {

    if (!controller.value.isInitialized) {

      return Container();

    }

    return Scaffold(

      appBar: AppBar(title: Text('カメラ撮影')),

      body: Stack(

        children: [

          CameraPreview(controller),

          Positioned(

            bottom: 30,

            left: MediaQuery.of(context).size.width / 2 - 30,

            child: FloatingActionButton(

              child: Icon(Icons.camera),

              onPressed: () => takePicture(),

            ),

          ),

        ],

      ),

    );

  }

  Future<void> takePicture() async {

    if (!controller.value.isInitialized) {

      print('Controller is not initialized');

      return null;

    }

    final XFile picture = await controller.takePicture();

    Navigator.push(

      context,

      MaterialPageRoute(

        builder: (context) => PreviewScreen(imagePath: picture.path),

      ),

    );

  }

}

class PreviewScreen extends StatelessWidget {

  final String imagePath;

  const PreviewScreen({Key key, this.imagePath}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('プレビュー')),

      body: Image.file(File(imagePath)),

    );

  }

}

```

## 6. まとめ

このチュートリアルでは、Flutterの`camera`プラグインを使い、撮影後のプレビュー画面を表示する基本的な方法を学びました。この方法によって、ユーザーに対して優れたUXを提供するカメラアプリケーションを構築できます。この知識を基に、さらにカスタマイズした機能を追加し、自分だけのカメラアプリを作成してください。

FlutterでのCameraプラグインを使用した撮影後のプレビュー画面表示方法

目次

続きを読むには単価診断を受けてください（30秒）