GWにFlutterでアプリ開発した話
Flutter Meetup Osaka #3
自己紹介
● syu-kwsk (@syu_kwsk)
● 九工大プロ研に所属
● 出身は大阪
● Flutter歴は約2ヶ月
自己紹介
● syu-kwsk (@syu_kwsk)
● 大学3年生
● 出身は大阪
● Flutter歴は約2ヶ月
GWに…
Flutter製アプリをリリースしました!!
九工大プロ研でチーム開発
てっちゃん(@tetuomimi)
やっちん(@yattinda_aho)
このLTで話すこと
● TrackPaintの紹介
● 開発で初心者なりに考えたこと
このLTで話すこと
● TrackPaintの紹介
● 開発で初心者なりに考えたこと
Track × Paint
Startを押す
Track開始!!
位置情報を取得
とにかく歩きます
Stopを押す
APIと通信して
Paint生成!
#TrackPaint
でShare
いいねでRank付け
twitterAPIを使用
こんなTrackPaintが生まれました
普段の生活の中で
長距離(100kmぐらい)
運営の本気(芸術家志望)
このLTで話すこと
● TrackPaintの紹介!
● 開発で初心者なりに考えたこと
初心者なりに考えたこと①
初心者なりに考えたこと①
API通信中の描画を分ける
データ取得前 データ取得後
データが有るか無いかで描画を分ける
BLoC ? プロバイダー ?
全然わからん…
チュートリアルは
3項演算子で描画を分け
とったな!
API通信をしているWidget
ロード中か判定用の変数
ロード中か判定用の変数
3項演算子で
最初はロード中の画面
ロード中か判定用の変数
3項演算子で
最初はロード中の画面
APIと通信し、データを取得
判定用の変数をfalseに
ロード中か判定用の変数
3項演算子で
最初はロード中の画面
APIと通信し、データを取得
判定用の変数をfalseに
通信後のWidgetを描画
初心者なりに考えたこと②
初心者なりに考えたこと②
端末サイズに依存しないレイアウト
端末によっては
Widgetサイズが収まらない
チュートリアルは
PaddingとかMarginを使ってた
pxの値で変わってしまう
端末に依らずに
Widgetの大きさをpx以外で
指定したい!
● Expand()
Widgetをいっぱいまで広げる、flexで割合を指定
● FittedBox()
子Widgetをいっぱいまで広げる
画像と共有ボタンのWidget
Expand()で広げる
flexで割合指定
Expand()で広げる
flexで割合指定
Expand()で広げる
flexで割合指定
Image
Text
Button
Expand()で広げる
flexで割合指定
Image
Text
Button
Expand()で広げる
flexで割合指定
Image
Text
Button
● 3項演算子でAPI通信と描画を分ける
● pxの値だと端末のサイズに依存する
● Expand(), FittedBox()で大きさを決める
初心者なりに考えたこと
今すぐインストール!
ありがとうございました

Track paint