Flutterに触る at 【MarkingCloud】

今回は勉強会レポ。

こちらに参加してきました。

Flutterハンズオン-Google発マルチプラットフォーム-【MarkingCloud】

今回で3回目です。過去参加したのは↓

GoogleCloudVisionAPIハンズオン-画像分析体験！-【MarkingCloud】

Firebaseハンズオン- Webクラウドアルバム編 -【MarkingCloud】

この勉強会の特徴としては

・ハンズオンがメイン

→実際に何か動くものを作ってみたいという人にはおすすめ。

・運営が若くてエネルギッシュ

→運営の方々、非常に若いです。それでいて知識も豊富。

・ゆるい

→和やかな雰囲気です。マサカリが飛んでくることはないです笑

新しめの技術にとりあえず触ってみたいけど自分一人じゃなかなか…という人はぜひ。

Flutterとは

https://flutter.io/

Flutter is Google’s mobile SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

要するにワンソースでiOSでもAndroidでも動いちゃいます、といういかしたやつです。
Dartという言語を使って書くみたいです。今日初めて触ったのですが一見Javaっぽい印象を受けました。

勉強会で作ったもの

codelabsにあるものを作りました。

https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#0

環境構築までがちょっとめんどいですが、それが終わってしまえばあとは楽チンです。1時間程度で終わるのでやってみるといいと思います。
Flutter SDKを落としてきたりAndroidStudio or VSCodeでFlutter用のプラグイン入れたりが必要です。

Flutter SDKですが自分の場合は
Beta channel, macOS
v0.5.1を落としてきました。

https://flutter.io/sdk-archive/#macos

ちなみにAndroidStudioとVSCodeどちらでも動かせるみたいですがAndroidStudioの方がハマりポイントが少なそうでした。

諸々の手順はcodelabsをみてもいいですしconnpass上の資料をみてもいいと思います。

よくわからなかったところ

Flutterアプリ、簡単に動きはしたのですが、いろいろわからない点があって気持ち悪かったので帰宅してから見てみました。

MterialApp

return new MaterialApp(
  title: 'Startup Name Generator',
  home: new RandomWords(),
);

MaterialAppってのを指定するとマテリアルデザイン基調になるんでしょう。他のデザインもあるんですかね？？

アロー関数(?)

RandomWordsState createState() => new RandomWordsState();

自分の知識が足りないだけかもですが、経験上この書き方見たことなくて理解できませんでした。

codelabsにしっかり書いてありました。

The main method uses fat arrow (=>) notation, Use fat arrow notation for one-line functions or methods.

1行の関数は => を使って書くのがDart流（？）みたいです。

StatelessWidget

MyAppはStatelessWidgetとやらを継承していましが、これはなんだろう。

これもcodelabsに書いてありました。

The app extends StatelessWidget, which makes the app itself a widget. In Flutter, almost everything is a widget, including alignment, padding, and layout.

アプリはStatelessWidgetを継承していて、アプリ自体をウィジェットとしています。Flutterでは、alignment、padding、layout含めほぼ全てがウィジェット、とのことです。
Flutterはコンポーネント指向みたいな考え方なのかな？
とにかくStatelessWidgetを継承するのはお決まりみたいです。

Scaffold

RailsではおなじみのScaffoldとやらがあるみたいです。

Widget build(BuildContext context) {
    return new Scaffold (
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }

The Scaffold widget, from the Material library, provides a default app bar, a title, and a body property that holds the widget tree for the home screen. The widget subtree can be quite complex.

ナビゲーションバーやらタイトルやら本体部分やらをいい感じで作ってくれるものみたいです。RailsのScaffoldみたいに基本構成をぱぱっと作れるイメージですかね…？
みた感じappBarとbodyというプロパティがありますね。appBarは上部のナビゲーション部分について、bodyはコンテンツ部分について対応するものかと。

で、これもともとMyAppの中に直接書かれてたんですけど、責務分割（？）のためかチュートリの途中で別クラスに切り出されてました。なんとなくですがScaffoldで生成したインスタンスはhomeキーに設定するものっぽいと思いました。

Before

return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new RandomWords(), 
        ),
      ),
    );

After

return new MaterialApp(
  title: 'Startup Name Generator',
  home: new RandomWords(), // RandomWords()を辿って行くと結局Scaffoldが呼ばれている。
);

結局どちらもhomeに設定しているのはnew Scaffoldです。

build

buildって色々出てきたけどこれはなんでしょう。

A widget’s main job is to provide a build method that describes how to display the widget in terms of other, lower-level widgets.

ウィジェットの主な役割はbuildメソッドを提供することとのことです。

特にbuild()のように呼び出している箇所はなかったので、思うにウィジェットのインスタンスを生成した際に呼び出されるものなのかなーと。コンストラクタというかイニシャライザというか。

なので、ここが走ると、

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

ここのbuildが走る、みたいなイメージですかね。

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold (
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }
}

処理の流れ

合っているかわかりませんが、処理の流れを整理すると、、、

アプリを実行する
MyAppのbuildメソッドが実行される
その中でnew RandomWord()が実行される
RandomWordの中ではnew RandomWordsState()が実行される
RandomWordStateのbuildメソッドが実行され、Scaffoldが実行される。
Scaffoldの中で_buildSuggestions()メソッドが実行される。
_buildSuggestions()の中ではいろいろやってListViewを作ってる。

こんな感じになるのかなと思いました。

ワンソースでiOSもAndroidもいけるのはやっぱ魅力的ですね。とはいえ学習コストはそれなりにかかりそうなのでそこは覚悟した方がいいかもです。

以上、Flutterに触る at 【MarkingCloud】でした。

投稿日: 2018/07/11 執筆者齋藤大地カテゴリー: プログラミング

Orfool inc.