NCMBのFlutter SDKを使ってカメラメモアプリを作る（その1：画面の仕様とSDKの初期化）

NCMBでは公式SDKとしてSwift/Objective-C/Kotlin/Java/Unity/JavaScript SDKを用意しています。また、それ以外にもコミュニティSDKとして、非公式ながらFlutter/React Native/Google Apps Script/C#/Ruby/Python/PHPなど幅広い言語向けにSDKが開発されています。

今回はコミュニティSDKの一つ、Flutter SDKを使ってカメラメモアプリを作ってみます。まず画面の仕様とSDKの初期化について解説します。

## 完成版のコード

作成したデモアプリのコードは[NCMBMania/flutter_camera_memo: FlutterとNCMBによるカメラメモアプリです](https://github.com/NCMBMania/flutter_camera_memo)にアップロードしてあります。

## ベースを作成する

`flutter create` コマンドでベースを生成します。

```
flutter create camera_memo
```

## lib/main.dartについて

今回のコードはすべて main.dart に記述しています。クラスは次の7つです。

- class CameraMemoApp extends StatelessWidget
- class MainPage extends StatefulWidget
- class _MainPageState extends State<MainPage>
- class FormPage extends StatefulWidget
- class _FormPageState extends State<FormPage>
- class ListPage extends StatefulWidget
- class _ListPageState extends State<ListPage>
- class ListItem extends StatefulWidget
- class _ListItemState extends State<ListItem>
- class ImagePage extends StatelessWidget

## CameraMemoApp

カメラメモアプリ全体の読み込みを行うウィジェットです。

## MainPageと_MainPageState

![Simulator Screen Shot - iPhone 12 - 2022-03-10 at 13.48.38のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/9864b9eb-6ca3-4ada-11d7-4d629fe92c3d.png)


タブバーを使ってFormPageとListPageを読み込むウィジェットです。

## FormPageと_FormPageState

![Simulator Screen Shot - iPhone 12 - 2022-03-10 at 14.01.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/897730af-ac60-ff5c-4fea-503742c817d3.png)

メモ入力画面用のウィジェットです。

## ListPageと_ListPageState

![Simulator Screen Shot - iPhone 12 - 2022-03-10 at 14.06.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/d5a87394-b7ae-7338-f8ae-dc7b538835ee.png)
Simulator Screen Shot - iPhone 12 - 2022-03-10 at 14.06.01.png

登録したメモを一覧表示するウィジェットです。

## ListItemと_ListItemState

![Simulator Screen Shot - iPhone 12 - 2022-03-10 at 14.06.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/4973b689-375c-400d-a5d2-24709b8996a7.png)
Simulator Screen Shot - iPhone 12 - 2022-03-10 at 14.06.01.png

一覧表示時の、各行を描画するためのウィジェットです。

## ImagePage

![Simulator Screen Shot - iPhone 12 - 2022-03-10 at 14.06.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/25c41a06-4899-1fc4-5b3c-efa294a85268.png)
Simulator Screen Shot - iPhone 12 - 2022-03-10 at 14.06.06.png

一覧をタップした時に画像を拡大表示するウィジェットです。

## 匿名認証の有効化

![FireShot_Capture_161_-_20220310141510_ニフクラ_mobile_backend_-_console_mbaas_nifcloud_com.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/7ffcbaac-b5fa-9472-aa06-a97a21ea716a.jpeg)


今回はNCMBの匿名認証（パスワード不要な認証機能）を利用します。管理画面のアプリ設定にて、匿名認証を有効にします。

## NCMB SDKのインストール

NCMB SDKは `flutter pub add ncmb` でインストールできます。

```
flutter pub add ncmb
```

記事執筆時点での最新版は `2.3.2` です。

## NCMB SDKの初期化

まず main.dart にてNCMB SDKをインポートします。

```dart
import 'package:ncmb/ncmb.dart';
```

main関数にて初期化します。アプリケーションキーとクライアントキーは `assets/.env` 内に記述しています。今回はdotenvライブラリ `flutter_dotenv` を使っています。

`.env` の内容は以下の通りです。各キーはニフクラ mobile backendで取得してください。

```
APPLICATION_KEY=YOUR_APPLICATION_KEY
CLIENT_KEY=YOUR_CLIENT_KEY
```

main.dart のmain関数でNCMBの初期化をします。

```dart
Future<void> main() async {
  // キーは assets/.env にあります
  await dotenv.load(fileName: "assets/.env");
  // NCMBを初期化
  NCMB(dotenv.env['APPLICATION_KEY'] as String,
      dotenv.env['CLIENT_KEY'] as String);
  // ログイン情報を取得します
  var user = await NCMBUser.currentUser();
  // ログインしていない場合は匿名認証を実行します
  if (user == null) {
    NCMBUser.loginAsAnonymous();
  }
  runApp(const CameraMemoApp());
}
```

これでNCMB SDKの利用準備が整います。

## iOSシミュレーターで動かす場合

今回は `image_picker` を使っているので、カメラやフォトライブラリへのアクセス権限が必要です。 `ios/Runner/Info.plist` を開いて設定を追加します。

```xml
<key>NSPhotoLibraryUsageDescription</key>
<string>写真ライブラリにアクセスします</string>
<key>NSCameraUsageDescription</key>
<string>カメラにアクセスします</string>
```

## まとめ

今回は各画面の説明とNCMB SDKの初期化までを行いました。[次回はフォームを作成して写真とメモを保存します](https://qiita.com/goofmint/items/a18e14d8962d36869cc6)。