마지막 회의

Flutter의 인스톨을 해, 샘플 코드를 움직였다.
「Flutter 공부 기록 1일째~설치로부터 샘플 코드를 달릴 때까지~」

오늘 사용하는 프로젝트는 어제 생성한 초기 샘플 코드를 사용합니다.

이 기사에서 할 일

카메라를 사용하여 뷰파인더 너머의 전망을 보는 앱 만들기

카메라 앱이 아니다. (사진 촬영 기능 없음)

부 b. 에서 v 장소에 있던 카메라 플러그인 사용

환경

Windows10

VScode

camera: ^0.8.1+7

Flutter 2.2.3 • channel stable • htps : // 기주 b. 이 m/fぅ는 r/fぅ는 r. 기 t

Framework • revision f4abaa0735 (6 weeks ago) • 2021-07-01 12:46:11 -0700

Engine • revision 241c87ad80

Tools • Dart 2.13.4

1. 카메라를 사용하기 위해 설정 변경

camera 플러그인 Readme > Installation 에 따라 설정을 변경한다.

camera 플러그인을 사용하려면 iOS는 버전 10.0 이상, Android는 sdk version 21 이상(Android5.0 LOLLIPOP) 이상이 필요하기 때문에 그 설정을 한다.

iOS

주의
문서에 따라 설정을 하고 있습니다만, iOS의 실제기를 가지고 있지 않기 때문에 동작 확인은 할 수 없습니다.

1. ios/Runner/Info.plist 열기


2. 최초의 쪽에 이하의 문장을 카피해, 위의 쪽에 붙여 넣는다.

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

안드로이드

1. android/app/build.gradle 열기
2. minSdkVersion 라고 쓰여진 행을 찾아내고 minSdkVersion 21

2. 카메라 플러그인을 사용할 수 있도록 합니다.

1. VSCode의 터미널 > 새 터미널을 클릭하여 터미널을 꺼냅니다.
2. flutter pub add camera 를 실행한다.
3. 여러가지 나와 마지막으로 Changed 7 dependencies!가 나온다. pubspec.yaml 를 보고 dependencies: 에 camera 가 추가되어 있으면 OK.

3. 샘플 코드 복사하기

main.dart에 다음을 복사

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

late 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(
      home: CameraPreview(controller),
    );
  }
}

4. test\widget_test.dart 수정

test\widget_test.dart 에 에러가 발생한다 (초기 생성되고 있던 MyApp()가 사라졌기 때문에), MyApp() 를 CameraApp() 로 수정한다.


어쩌면 여기에는 main.dart의 main 함수 내의 runApp();에 들어있는 함수가 온다.

※공식 문서의 에러에 대해서

공식 문서에서 바꾸고있는 곳을 쓰고 있으므로, 관심이 없으면 읽어 날려 OK입니다.

공식 문서 Example 을 그대로 복사하면 몇 가지 에러가 나왔으므로 수정하고 있습니다. "3. 샘플 코드를 복사" 에 붙어 있는 코드는 수정 후입니다.
아래에 원래 코드, 오류, 수정 후 코드를 둡니다.

다섯 번째 줄

원래 코드List<CameraDescription> cameras;
오류

The non-nullable variable 'cameras' must be initialized.
Try adding an initializer expression.dart(not_initialized_non_nullable_variable)

수정 후 코드late List<CameraDescription> cameras;

20행

원래 코드CameraController controller;
오류

Non-nullable instance field 'controller' must be initialized.
Try adding an initializer expression, or a generative constructor that initializes it, or mark it 'late'.dar

수정 후 코드late CameraController controller;

36행(오류가 아니라 경고)

원래 코드controller?.dispose();
경고

The receiver can't be null, so the null-aware operator '?.' is unnecessary.
Try replacing the operator '?.' with '.'.dart(invalid_null_aware_operator)

수정 후 코드controller.dispose();

디버깅하고 이동해보십시오.

단지 파인더 너머로 보이는 경치를 담는 앱이 완성되었다.

오마케 정도의 아무래도 좋은 깨달음

main.dart 그러면 실행 버튼이 표시되는데, 확장자가 .dart가 아닌 곳은 표시되지 않는다..dart 때

.dart 그렇지 않을 때

둘째 날 끝

사실은 카메라 앱을 만드는 등 좀 더 진행된 것을 하고 싶었는데, 여러 가지 사정으로 시간을 낼 수 없었던 것, 단번에 여러가지로 하면 Dart의 의미를 이해하는 것이 따라잡지 않기 때문에 카메라 너머의 경치 보기만 하는 앱이 되었습니다.

본래 만들고 싶은 것은, 동영상 촬영을 실시하는 앱이므로, 다음은 사진 촬영 앱인가, 동영상 촬영 앱을 만들고 싶다고 생각합니다.

※추기
셋째 날은 여러 사정에 따라 공식 문서의 연속 (첫날 계속)이 되었습니다.
셋째 날 → Flutter 공부 기록 3일째～공식 문서의 튜토리얼～