Android開発者の為のFlutterのことはじめ

10月にflutter.ioに、Flutter for Android Developersが公開されました。
Androidの経験がある開発者がFlutterをこれからはじめたいならとても有益なドキュメントとなってます。
Flutterではどうなっていのかさわりだけ紹介したいと思います。

Flutter for Android Developers

概要(翻訳)

このドキュメントは、Flutterでモバイルアプリを構築するためにAndroidの既存の知識を適用しようとするAndroid開発者を対象としています。 Androidフレームワークの基本を理解していれば、このドキュメントをFlutter開発のスタートとして使用できます。

Androidの知識とスキルセットは、Flutterで構築するときに非常に価値があります、Flutterはモバイルオペレーティングシステムを使用してさまざまな機能や設定を行うためです。 Flutterはモバイル用のUIを構築する新しい方法ですが、UI以外のタスク用にAndroid（およびiOS）と通信するためのプラグインシステムを備えています。 Androidのエキスパートであれば、Flutterを使用するためにすべてを再学習する必要はありません。

このドキュメントは、あなたのニーズに最も関連する質問を飛び越えて見つけることによって、レシピとして使用することができます。

Views
Intents
Async UI
Project Structure & Resources
Activities and Fragments
Layouts
Gesture Detection and Touch Event Handling
Listviews & Adapters
Working with Text
Form Input
Flutter Plugins
Themes
Databases and local storage
Notifications

目次をみてみても、AndroidのこれはFlutterではこうなってるというようなドキュメントとなってます。

View　

Androidでは、Viewで画面を構成していました。Toolbar、Button、TextView、ImageViewなどです。Flutterでは、ViewはUIを構成するのはWidgetとなります。

Androidでは、Viewはinvalidateでビューの値を直接変更して描画されますが、Flutterでは、Widgetのインスタンスは不変であり、状態の変化を伝えることで表示を変更させます。

Widgetには、StatelessWidgetとStatefulWidgetの二種類があります。前者は、状態の変化を持たないため、Toolbarのロゴなどに有効です。後者は、HTTP呼び出しやユーザー対話を行った後に受け取ったデータに基づいてUIを動的に変更する場合に状態を更新させて表示を更新させることができます。

Androidでは、XMLを使用してレイアウトを作成しますが、Flutterでは、コード上にWidget Treeを構成してレイアウトを作成します。

以下は、flutter create myappで、作成されたコードの抜粋です。
buildメソッドで、Widget Treeを構築しています。
FABのonPressed()で呼び出せれる、_incrementCounterで、状態の変更を行っています.

  int _counter = 0;

  void _incrementCounter() {
    setState(() { // 状態変更をしらせる。
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Text(
          '$_counter',
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        child: new Icon(Icons.add),
      ), 
    );
  }

Layouts

The equivalent of a LinearLayout

Androidでは、LinearLayoutを使用してViewを水平または垂直に配置することができます。 Flutterでは、Row Widget または、Column Widgetを使用して同じように配置することができます。

@override
Widget build(BuildContext context) {
  return new Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      new Text('Row One'),
      new Text('Row Two'),
      new Text('Row Three'),
      new Text('Row Four'),
    ],
  );
}

@override
Widget build(BuildContext context) {
  return new Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      new Text('Column One'),
      new Text('Column Two'),
      new Text('Column Three'),
      new Text('Column Four'),
    ],
  );
}

Listviews

FlutterのListViewでは、Widgetのリストを渡して状態の変化を伝えることで表示することができます。

  List widgets = [];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample App"),
      ),
      body: new ListView(
        children: widgets
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _addItem,
        child: new Icon(Icons.add),
      ), 
    );
  }

  void _addItem() {
    setState(() {
      widgets = new List.from(widgets);
      widgets.add(getRow(widgets.length + 1));
    });
  }

TextInputLayout & EditText

Flutterでは、TextFormFieldを使用します。decorationにInputDecorationを指定することで、ヒントやラベルを追加することができます。controllerに指定されたTextEditingControllerから、入力値を取得することができます。

final TextEditingController _controller = new TextEditingController();

body: new Center(
  child: new TextFormField(
    controller: _controller,
    decoration: const InputDecoration(
      hintText: 'This is a hint',
      labelText: 'This is a label',
    ),
  ),
)

Preferences

Flutterでは、keｙ-ｖalueのデータの永続化にAndroidのSharedPreferencesを使用することができます。
使用するにはshared_preferencesプラグインを利用します。このプラグインを使用するとAndroidのSharedPreferences、iOSのUserDefaultsにデータを保管することができます。

SQLiteを使用したい場合は、sqfliteプラグインを使用することで可能になります。

Summary

今回は簡単な紹介でしたが、より詳しい内容は、Flutter for Android Developersを参照をして頂ければ良いと思います。

この他にもTutorialやCodelab等々のドキュメントが充実しているので、興味のある方はチャレンジしてみてはどうでしょうか？

Android開発者の為のFlutterのことはじめ

Android開発者の為のFlutterのことはじめ

Flutter for Android Developers

概要(翻訳)

Table of contents

View

Layouts

The equivalent of a LinearLayout

Listviews

TextInputLayout & EditText

Preferences

Summary

View　