Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

by granoeste
1 / 10

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を使用するためにすべてを再学習する必要はありません。

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


Table of contents

  • 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では、key-valueのデータの永続化にAndroidのSharedPreferencesを使用することができます。
使用するにはshared_preferencesプラグインを利用します。このプラグインを使用するとAndroidのSharedPreferences、iOSのUserDefaultsにデータを保管することができます。

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


Summary

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

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away