非公式ながら開発を進めているFlutter SDKですが、先日stableになったFlutter2.0でも動作するようになりました。この記事ではFlutter2.0での簡単な使い方を紹介します。
はじめかた
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をぜひご利用ください。
