FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Flutter用NCMB SDKのはじめかた

f:id:mbaasdevrel:20200110154553p:plain

非公式ですが、Flutter(Dartでも)で使えるNCMB SDKを開発しています。

ncmb | Dart Package

今回はFlutterアプリの中に組み込んで、開発をはじめるまでの手順を紹介します。

Flutterのインストール

まずはFlutterをインストールします。インストーラーはこちらからダウンロードできます。

Install - Flutter

Flutterをインストールしたら flutter doctor を実行して足りないライブラリなどをインストールします。

Flutterプロジェクトの作成

インストールが完了したら、プロジェクトを作成します。

$ flutter create hello_ncmb

ベースになるコードが生成されたら、hello_ncmbに移動します。

$ cd hello_ncmb

SDKを追加する

NCMB SDKを追加します。pubspec.yaml の中に記述します。

dependencies:
  flutter:
    sdk: flutter
  ncmb: ^0.1.1   # これを追加

追加したら、ライブラリをインポートします。

$ flutter pub get

NCMBをインポートする

lib/main.dart を編集します。まずファイルの上でNCMB SDKをインポートします。

import 'package:flutter/material.dart';
// 下記を追加
import 'package:ncmb/ncmb.dart';

NCMBの初期化

NCMBはアプリ全体で使いますので、MyAppの中で初期化します。コメントは消しています。初期化した後、MyHomePageにNCMBを渡します。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // NCMB SDKの初期化
    NCMB ncmb = NCMB('53e...fff', '3ba...bbf');
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 次のウィジェットにNCMBを渡します
      home: MyHomePage(title: 'Flutter Demo Home Page', ncmb: ncmb),
    );
  }
}

ウィジェットでの受け取り

次の StatefulWidget ではNCMBを受け取ります。

class MyHomePage extends StatefulWidget {
  // NCMBを受け取るように修正
  MyHomePage({Key key, this.title, this.ncmb}) : super(key: key);

  final String title;
  // クラス変数を追加
  NCMB ncmb;
  
  // NCMBを次のウィジェットに渡します
  @override
  _MyHomePageState createState() => _MyHomePageState(ncmb);
}

次のStateでも同様にNCMBを受け取ります。

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  // 追加
  NCMB ncmb;
  // 追加
  _MyHomePageState(this.ncmb);
  // :
}

利用する

例えば画面にボタン(FlatButton)を追加します。

f:id:mbaasdevrel:20200114095648p:plain

Text(
  'ボタンを押すとデータストアにデータが追加されます',
),
FlatButton(
  padding: EdgeInsets.all(20.0),
  color: Colors.lightBlue,
  onPressed: () async {
    // データストアのオブジェクトを生成
    var item = ncmb.Object('Item');
    // 値を設定
    item.set('msg', 'Hello, world!');
    // 保存(awaitで非同期処理を実行)
    await item.save();
    // 保存が完了したらobjectIdをデバッグ表示
    print(item.get('objectId'));
  },
  child: Text(
    'Hello world',
    style: TextStyle(
      color: Colors.white,
    ),
  ),
)

onPressedはボタンをタップした際に呼ばれるイベントです。ここではasyncを定義しています。こうすることでasync/awaitを使って非同期処理が書きやすくなります。

アプリを実行するのは flutter run になります。iOSシミュレータが起動していれば、その上でアプリが動作します。その他、Androidエミュレータや実機でも実行できます。

まとめ

Flutterグローバル変数は推奨されていないので、ウィジェットに変数を随時渡すのがよさそうです。ぜひFlutterでもNCMBを使ってみてください。

NCMBMania/ncmb-dart: NCMB library for Dart and Flutter.

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。