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

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

Flutter SDK(非公式)をWeb上で体験できるデモを作りました

f:id:mbaasdevrel:20210208143035p:plain

Flutterはネイティブアプリ(iOS、Android)はもちろん、WebやmacOS、Windowsまで幅広いプラットフォームに対応したフレームワークです。非公式で開発しているFlutter SDKはv2になって、Web上でも動作可能となっています。

そこで実際にFlutter SDKをWeb上で体験できるデモを開発してみました。

デモのURL

デモはこちらにあります。

f:id:mbaasdevrel:20210208143035p:plain

Flutter Demo

まだデータストアへの保存機能しかありません。

Flutter SDKの使い方

Flutter SDKを使う場合には、まずpubspec.yamlを変更します。

dependencies:
  ncmb: ^2.0.2

そしてインストールします。

$ flutter pub get

SDKの読み込みと初期化

main.dartなどでライブラリを読み込みます。

import 'package:ncmb/ncmb.dart';

そして main 関数の中で初期化します。

void main() {
  new NCMB('YOUR_APPLICATION_KEY', 'YOUR_CLIENT_KEY');
  runApp(MyApp());
}

これで準備完了です。初期化時に各クラス変数にNCMBを紐付けているので、変数をウィジェット内で持ち回す必要はありません。

使い方

例えばボタンを押したタイミングでデータストアに保存する場合、次のようになります。

String _message = '';
String _objectId = '';

void _handleText(String e) {
  setState(() {
    _message = e;
  });
}

void _handlePressed() async {
  var item = NCMBObject('Item')
    ..set('message', _message);
  await item.save();
  setState(() {
    _objectId = item.get('objectId');
  });
}

コード

コードはオープンソースで、GitHub上で公開しています。ライセンスはMIT Licenseになります。

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

Flutter依存の部分を削除していますので、純粋なDartライブラリとして利用可能です。

まとめ

Web上のデモは今後、他の機能を手軽に試せるように拡充させていきます。ぜひFlutterでもNCMBを使ってアプリ開発を行ってください。

ncmb | Dart Package

中津川 篤司

中津川 篤司

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