TrackPaint

1. GWにFlutterでアプリ開発した話
Flutter Meetup Osaka #3

2. 自己紹介
● syu-kwsk (@syu_kwsk)
● 九工大プロ研に所属
● 出身は大阪
● Flutter歴は約2ヶ月

3. 自己紹介
● syu-kwsk (@syu_kwsk)
● 大学3年生
● 出身は大阪
● Flutter歴は約2ヶ月

4. GWに…

5. Flutter製アプリをリリースしました！！

6. 九工大プロ研でチーム開発
てっちゃん（@tetuomimi）
やっちん（@yattinda_aho）

9. このLTで話すこと
● TrackPaintの紹介
● 開発で初心者なりに考えたこと

10. このLTで話すこと
● TrackPaintの紹介
● 開発で初心者なりに考えたこと

11. Track × Paint

12. Startを押す

13. Track開始!!
位置情報を取得

18. とにかく歩きます

19. Stopを押す

20. APIと通信して
Paint生成！

21. #TrackPaint
でShare

22. いいねでRank付け
twitterAPIを使用

23. こんなTrackPaintが生まれました

24. 普段の生活の中で

25. 長距離（100kmぐらい）

26. 運営の本気（芸術家志望）

28. このLTで話すこと
● TrackPaintの紹介！
● 開発で初心者なりに考えたこと

29. 初心者なりに考えたこと①

30. 初心者なりに考えたこと①
API通信中の描画を分ける

31. データ取得前 データ取得後

32. データが有るか無いかで描画を分ける
BLoC ? プロバイダー ?
全然わからん…

33. チュートリアルは
３項演算子で描画を分け
とったな！

34. API通信をしているWidget

35. ロード中か判定用の変数

36. ロード中か判定用の変数
３項演算子で
最初はロード中の画面

37. ロード中か判定用の変数
３項演算子で
最初はロード中の画面
APIと通信し、データを取得
判定用の変数をfalseに

38. ロード中か判定用の変数
３項演算子で
最初はロード中の画面
APIと通信し、データを取得
判定用の変数をfalseに
通信後のWidgetを描画

39. 初心者なりに考えたこと②

40. 初心者なりに考えたこと②
端末サイズに依存しないレイアウト

41. 端末によっては
Widgetサイズが収まらない

42. チュートリアルは
PaddingとかMarginを使ってた
pxの値で変わってしまう

43. 端末に依らずに
Widgetの大きさをpx以外で
指定したい！

44. ● Expand()
Widgetをいっぱいまで広げる、flexで割合を指定
● FittedBox()
子Widgetをいっぱいまで広げる

45. 画像と共有ボタンのWidget

47. Expand()で広げる
flexで割合指定

48. Expand()で広げる
flexで割合指定

49. Expand()で広げる
flexで割合指定
Image
Text
Button

50. Expand()で広げる
flexで割合指定
Image
Text
Button

51. Expand()で広げる
flexで割合指定
Image
Text
Button

52. ● 3項演算子でAPI通信と描画を分ける
● pxの値だと端末のサイズに依存する
● Expand(), FittedBox()で大きさを決める
初心者なりに考えたこと

54. 今すぐインストール!

55. ありがとうございました