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開発環境構築でのトラブル

Flutter開発で、iPhone実機テストを行おうと思って、$ flutter doctorで環境を確認したが、以下のエラーが出た。

[!] iOS toolchain - develop for iOS devices (Xcode 9.2)
✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
brew install --HEAD libimobiledevice
brew install ideviceinstaller
! CocoaPods out of date (1.5.0 is recommended).
CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
For more info, see https://flutter.io/platform-plugins
To upgrade:
brew upgrade cocoapods
pod setup

エラーメッセージどおり$ brew install --HEAD libimobiledeviceを試すが、以下のエラーが出る。

==> Installing dependencies for libimobiledevice: libplist
==> Installing libimobiledevice dependency: libplist
==> Downloading https://homebrew.bintray.com/bottles/libplist-2.0.0_1.sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring libplist-2.0.0_1.sierra.bottle.tar.gz
🍺 /usr/local/Cellar/libplist/2.0.0_1: 29 files, 347.4KB
==> Installing libimobiledevice --HEAD
==> Cloning https://git.libimobiledevice.org/libimobiledevice.git
Cloning into '/Users/deni/Library/Caches/Homebrew/libimobiledevice--git'...
==> Checking out branch master
Already on 'master'
Your branch is up to date with 'origin/master'.
==> ./autogen.sh
Last 15 lines from /Users/deni/Library/Logs/Homebrew/libimobiledevice/01.autogen.sh:
checking dynamic linker characteristics... darwin16.7.0 dyld
checking how to hardcode library paths into programs... immediate
checking for pkg-config... /usr/local/opt/pkg-config/bin/pkg-config
checking pkg-config is at least version 0.9.0... yes
checking for libusbmuxd >= 1.1.0... no
configure: error: Package requirements (libusbmuxd >= 1.1.0) were not met:

Requested 'libusbmuxd >= 1.1.0' but version of libusbmuxd is 1.0.10

Consider adjusting the PKG_CONFIG_PATH environment variable if you
installed software in a non-standard prefix.

Alternatively, you may set the environment variables libusbmuxd_CFLAGS
and libusbmuxd_LIBS to avoid the need to call pkg-config.
See the pkg-config man page for more details.

READ THIS: https://docs.brew.sh/Troubleshooting

libusbmuxdのバージョンが、古いらしいが、アップデート方法が不明だった。
いろいろ調べてみたら、usbmuxdというのでいけるっぽいので、削除して入れ直す。

$ brew uninstall --ignore-dependencies usbmuxd
$ brew install --HEAD usbmuxd
$ brew unlink usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller

$ gem update cocoapodsで、cocoapodsのアップデートができなかったので、これも古いのを一旦削除して、入れ直す。

$ gem uninstall cocoapods
$ gen install cocoapods

$ pod setupが失敗するが、以下の手順で成功

$ pod repo remove master
$ pod setup

再度、 $ flutter doctorを試す。

[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)

これで実機テスト出来るようになりました!

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日(月)予定です。