NCMBのFlutter SDKを使ってニュースアプリを作る（その1：画面の仕様とSDKの初期化） #Flutter

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

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

ncmb | Dart Package

完成版のコード

作成したデモアプリのコードはNCMBMania/flutter_news: Flutter SDKを使ったニュースアプリデモです。にアップロードしてあります。

ベースを作成する

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

flutter create news_app

lib/main.dartについて

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

MyApp extends StatelessWidget
MyHomePage extends StatefulWidget
_MyHomePageState extends State
MyDetailPage extends StatefulWidget
_MyDetailPageState extends State

MyApp

アプリ全体の設定を行っています。

MyHomePage

_MyHomePageStateを呼び出しています。

_MyHomePageState

NCMBに保存されているニュース記事を取得して、一覧表示しています。お気に入りの記事だけを表示する機能もあります。

MyDetailPage

記事一覧をタップした際に呼ばれます。_MyDetailPageStateを呼び出しています。

_MyDetailPageState

記事の詳細を表示します。HTMLをレンダリングして本文を表示しています。

NCMB SDKのインストール

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

flutter pub add ncmb

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

NCMB SDKの初期化

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

import 'package:ncmb/ncmb.dart';

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

Future main() async {
  await dotenv.load(fileName: '.env');
  var applicationKey =
      dotenv.get('APPLICATION_KEY', fallback: 'No application key found.');
  var clientKey = dotenv.get('CLIENT_KEY', fallback: 'No client key found.');
  NCMB(applicationKey, clientKey);
  runApp(const MyApp());
}

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

匿名認証の利用準備

FireShot_Capture_328_-ニフクラ_mobile_backend-console_mbaas_nifcloud_com_20211210105942-_328.jpg

匿名認証はスマートフォンアプリ内部でUUIDを生成し、それを使って認証を行います。IDやパスワードを入力することなく、認証機能が利用できます。匿名認証はまず、NCMBの管理画面で有効にしなければなりません。

まとめ

今回は各画面の説明とNCMB SDKの初期化までを行いました。次回はニュース記事の取得と表示を行います。