非公式ですが、Flutter(Dartでも)で使えるNCMB SDKを開発しています。
今回はFlutterアプリの中に組み込んで、開発をはじめるまでの手順を紹介します。
Flutterのインストール
まずは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)を追加します。
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を使ってみてください。