Flutterに触る at 【MarkingCloud】

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

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

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

これも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とやらがあるみたいです。

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みたいに基本構成をぱぱっと作れるイメージですかね…?
みた感じappBarbodyというプロパティがありますね。appBar上部のナビゲーション部分について、bodyコンテンツ部分について対応するものかと。

 

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

Before

After

結局どちらも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()のように呼び出している箇所はなかったので、思うにウィジェットのインスタンスを生成した際に呼び出されるものなのかなーと。コンストラクタというかイニシャライザというか。

なので、ここが走ると、

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

処理の流れ

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

  1. アプリを実行する
  2. MyAppbuildメソッドが実行される
  3. その中でnew RandomWord()が実行される
  4. RandomWordの中ではnew RandomWordsState()が実行される
  5. RandomWordStatebuildメソッドが実行され、Scaffoldが実行される。
  6. Scaffoldの中で_buildSuggestions()メソッドが実行される。
  7. _buildSuggestions()の中ではいろいろやってListViewを作ってる。

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

 

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

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

2018-08-05T23:17:22+00:00

About the Author:

齋藤大地
取締役。大手Sler出身。三度の飯よりコーディングが好きな人間。得意じゃないイラレやフォトショなどの仕事をしている時は目が死んでいる。使用言語は、Swift、Ruby(Ruby on Rails)、PHP、Javascript、Kotlin(ちょっとだけ)。

Leave A Comment

TWITTER

ご相談ください

 確認ページはございません。内容をご確認の上チェックを入れてください