Flutter勉強会 7回目

間が空いた

インフルエンザやらなにやらで、少しまた間が空いてしまいましたが再開しました。

今回やったこと。

  1. GoogleMapsプラグインのversion 0.2.0を使う
  2. GoogleMapにマーカーを複数置く

GoogleMapsプラグインのversion 0.2.0を使う

こちらのQiitaの記事を参考にしました。

https://qiita.com/aoinakanishi/items/25f2526fc7c1fe8350c6

この記事を順に進めて行き、マーカーを置くところまで進みました。

ちなみにGoogleMapsApikeyを取得するにはクレジットカードが必要です。

GoogleMapにマーカーを複数置く

単純にaddMarker()を使って増やしていくことができます。

今回は増加用のボタンを作り一度押すたびに座標が少しずれてマーカーが表示していく様子を実装しました。

次回

GoogleMapsを使って自身の座標の取得とその座標をサーバーに投げることを目標とします。

Flutter勉強会 5回目

Fade a Widget in and out (CookBook)

公式のcook bookを試してみました。

ScaffoldにWidgetを入れていく

継承元のStateのジェネリクスにはStateFullWidgetを入れる

内容

CenterのWidgetを利用してBoxを中央に置く。
切り替えの管理はフラグを使う。
表示・非表示はopacityで透明と非透明で行う。
ScaffoldのfloatingActionButtonで切り替える。

まとめ

仕様道理に動かすことは出来たが理解が及ばず。
技術書典5で売っていたFlutter本に頼る?
もしくはDartの勉強をしてみる?
次回はFireBaseを使うかもしれないのでログインができるようにしておく。

メモ

引数にthis.titleとつけておくと自動で
this.title = title
をやってくれる?

Flutter勉強会を行いました 4回目11月5日(月) 13時~

参加者

今回も前回と同じメンバー、Webエンジニア2人、デザイナー1人、絵師さん一人で行いました。

デザイナー、絵師さんの二人は聞き専でWebエンジニア二人がメインで行いました。

今回は公式サイトの Building layouts in Flutter tutorial を行いました。

https://flutter.io/docs/development/ui/layout

躓いたポイントとして、横向きのレイアウトでケーキの絵を右に左に情報を出す例題があるのですが、勘違いで縦にしたときもキレイに表示されるものだと思い、戸惑いました。

最終的にはgithubのソースを貼り付けて試してみて、もともと横だけのレイアウトに対してのものと気づき先に進みました。

主にRowとColumnを使ってレイアウトの作り方を学びました。

次回は 5回目11月12日(月) です。

Add interactivity tutorialかFlutter cookbookを進める予定です。

 

 

 

 

 

 

Flutter勉強会を行いました 3回目10月29日(月) 15時~

参加者

今回も前回と同じメンバー、Webエンジニア2人、Gameエンジニア一人、デザイナー1人、絵師さん一人で行いました。

初めの小一時間は人数がまだ集まっていなかったので絵師さんとDartの公式サイトでDartの勉強を行っていました。

メンツが揃ってからはudacityの16から開始しました。

躓いたポイントとしてはMaterialPageRouteの挙動がiOSとandroidに沿った動きをするため、それに気づかずサンプル通りを目指して悪戦苦闘しました。udacityはandroidのエミュレータで動かしています。

 

 

udacityのLesson1は24まで全て完了しました。

Navigationによる画面の遷移、ステートレスとステートフルの挙動の違い等々を学びました。

次回は公式サイトに戻って残っているチュートリアルを行っていく予定です。

 

 

Flutter勉強会を行いました 2回目10月22日(月) 13時~

今回はWebエンジニア2人、Gameエンジニア1人、デザイナー1人、絵師さん1人で一部聞き専で行いました。

今回はudacityを教材に利用しました。

タイトルにQuizとついているのが課題で、それ以外は動画による説明が多いサイトですい。Quizは設問で仕様を出されるので、それを満たすようにFlutterのソースを書いていきます。

Lesson15まで行うことができました。

Lesson15ではListViewを作って項目ごとにタッチしたら色が変化するものを実装しました。

 

https://classroom.udacity.com/courses/ud905/lessons/92a39eec-0c04-4d98-b47f-c884b9cd5a3b/concepts/a253cee9-7f83-4fbf-b00f-1b82621a0853

 

 

Flutter勉強会 一回目10月15日(月) 13時~

Flutter勉強会を行ったのでその感想とFlutterの所感と行ったことの記録をしていきます。

Flutterとはクロスプラットフォームで開発できるGoogleが作ったフレームワークでマテリアルデザインで作成されます。iOS/Android,Webのフロント、サーバーサイドが作れるらしいです。

勉強会はエンジニア2人、デザイナー1人、絵師さん1人の四人が集まりました。

勉強の教材は公式サイトを使いました。

公式サイト
https://flutter.io/

環境は皆Macで共通して行いましたがWindowsでも似たような感じでセットアップできると思います。

時間がかかったポイントとしては環境設定でしょうか。必要なものが多いのでダウンロード、インストールに時間がかかります。パスの設定やコマンドで打ち込みが基本となるのでエンジニアの人には楽に設定できそうですがデザイナーの方や慣れてない人は苦戦するかと思います。flutterのバイナリへのパスをうまく通すことができたら下記のコマンドで開発環境の診断をしてくれます。足りない場合、コマンドも書いてあるのでそれに沿って行えば環境は揃えられます。

flutter doctor

Google先生はIDEとしてVSCodeかAndroidStudioを推奨しています。
我々はVSCodeで行いました。

ざっくり開発できるまでの手順を書きます。

・flutterをダウンロード
・解凍して適当なところにフォルダを移動させます。日本語パスは途中でうまく動作しないのでNGです。半角スペースも気をつけたほうがいいかもしれないです。
・flutter/binにパスを通します。.bash_profileに書いておきましょう。
・homebrew必須です
・cocoapods必須です。
・xcode必須です。xcodeは特に重いので勉強会やら何やらやるときは事前にインストールしておきましょう。
・VSCodeのflutterプラグインをインストール
・実行する前にVSCode右下がno deviceになってるのでiOSエミュレータを選択します。
・デバッグを実行でビルドが始まりエミュレーター内で動作します。

「Write Your First Flutter App」part 1とpart 2まで行いました。
サードパーティの辞書を読み込んで2つのワードを組み合わせてListViewに表示させる、さらにワード毎にお気に入りのチェックが出来てハンバーガーメニュー?から選択したお気に入り画面に遷移するというところまでがpart2ですね。
part3は無いようです。

一言感想を言うならば

hot reload 便利!

ソースを変えてセーブするだけでエミュレーター上の内容が変わります。
わざわざビルドしてアプリの生成しなおしとかしません。

バージョンがまだ0.9.4なのが不安ポイントですがflutter自体は面白いです。

flutterの仕組み自体が結構謎ではありましたがDart自体も良くわかってないので勉強が必要そうです。flutterはwidgetの中にwidgetを入れていくイメージです。今のところのイメージですが。

日本語の記事は少ないので基本公式サイトを見るのがオススメです。
英語力が弱い人はGoogle翻訳使いましょう。私もバンバン使ってます。

受注系の仕事に組み込むのはまだ不安ですが自作アプリだったらflutterメインに使っていってもいいかもしれないですね。

次回勉強会も10月22日(月)予定です。