【Flutter】AR（っぽい）アプリの作り方

＊この記事ではあくまでARっぽいアプリを作るため、真面目にARアプリを作りたい方はブラウザバックをお願いします。

この記事は、【可茂IT塾 Advent Calendar 2021】の9日目の記事です。

あいさつ

初めまして、いもりん(@imorin_basson)です。

何ヶ月か前に作るだけ作って放置していたARっぽいアプリを記事として紹介します。

準備

「camera」パッケージをインストールしておきます。
https://pub.dev/packages/camera/install

pubspec.yaml

dependencies:
  camera: 

次にカメラ機能の許可を得るためにios/Runner/Info.plistに以下を追加します。

ios/Runner/Info.plist

  <key>NSCameraUsageDescription</key>
  <string>Can I use the camera please?</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>Can I use the mic please?</string>

AndroidではminSdkVersionを21に指定します。

android/app/build.gradle

defaultConfig {
    // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
    applicationId "com.example.camera_app"
    minSdkVersion 21
    targetSdkVersion 29
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

これで準備完了です。

コード全文

main.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';

List<CameraDescription> cameras = [];

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  cameras = await availableCameras();
  runApp(CameraApp());
}

class CameraApp extends StatefulWidget {
  @override
  _CameraAppState createState() => _CameraAppState();
}

class _CameraAppState extends State<CameraApp> {
  late CameraController controller;


  @override
  void initState() {
    super.initState();
    controller = CameraController(cameras[0], ResolutionPreset.max);
    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 MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        body: SafeArea(
          child: Stack(
            fit: StackFit.expand,
            children: <Widget>[
              CameraPreview(controller),
              Opacity(
                opacity: 0.6,//透明度を調整
                child: Container(
                  //ここに表示させたい画面を作る
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解説

やっていることは単純で、シャッターも何もないカメラ画面を作って、その上に透けている画面をStackで重ねているだけです。
表示させたい画面を作ることで、まるでカメラの画面上にアプリが映し出されているARっぽいアプリが作れます。