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

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

Flutter SDKがFlutter2.0に対応しました

f:id:mbaasdevrel:20200110154553p:plain

非公式ながら開発を進めているFlutter SDKですが、先日stableになったFlutter2.0でも動作するようになりました。この記事ではFlutter2.0での簡単な使い方を紹介します。

はじめかた

Flutterのインストールはこちらから行います。

Install - Flutter

そしてプロジェクトを作ります。これまでFlutter for Webはチャンネルを変更する必要がありましたが、Stableになったことで正式サポートされるようになっています。

$ flutter create web_flutter2_demo

そしてプロジェクト内に移動して pubspec.yaml を修正します。

dependencies:
  ncmb: ^2.0.3

Flutter SDKはncmb | Dart Packageにて公開しています。執筆時点での最新版は 2.0.3 となっています。pubspec.yaml を編集したらインストールします。

$ flutter pub get

初期化する

lib/main.dart を開いてFlutter SDKをインポートします。

import 'package:ncmb/ncmb.dart';

そして MyApp の中で初期化します(場所はどこでも大丈夫です)。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    NCMB('YOUR_APPLICATION_KEY', 'YOUR_CLIENT_KEY');
    // 以下略

これで準備完了です。

データを保存する

例えばデモではボタンを押すと数字をインクリメントします。この処理の中でデータストアに保存してみます。そのため、まずは関数をasync/awaitに変更します。

// 変更前
void _incrementCounter() {
// 変更後
Future<void> _incrementCounter() async {

そして _incrementCounter の中でデータストアを定義します。これだけで Dart クラスへデータを保存します。

var obj = NCMBObject('Dart');
obj
  ..set('message', 'Hello world');
await obj.save();

Flutter2.0の面白い点

Flutter2.0ではWebで利用した際に、HTMLではなくCanvasがデフォルトになりました。これでパフォーマンスが向上するようです。また、iOSやAndroidだけでなく、Windows/macOS/Linuxなどのデスクトップ開発でも利用できます。

まとめ

Flutter SDKはNCMBの機能の中、77%程度を実装しています。クエリの拡張、スクリプト機能がまだ未実装なので、近く実装します。Flutter2.0でもNCMBをぜひご利用ください。

ncmb | Dart Package

中津川 篤司

中津川 篤司

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