GDSC Solution Challenge Japan 2023 Flutter WS

https://gdsc.community.dev/events/details/developer-student-clubs-tokyo-metropolitan-university-presents-huoroatsupumian-qiang-hui-2-flutterwakushiyotsupu-follow-up-workshop2-flutter-workshop/

Transcript

1. GDSC TMU Solution Challenge Japan WS 1 Flutter Workshop
2. Agenda 1. Solution Challenge Japan について 2. GDSC TMU について 3. Solutions from GDSC TMU 4. Flutter をのぞいてみよう 2
3. Solution Challenge Japan について Tomohiro Tani 3 @taniiicom
4. - グローバルの SC に先立ち開催 - テーマ : 「大学生活を豊かにするアプリケーション」 - 2023/10/31 応募締切 - 2023/12/3 発表会 - https://goo.gle/scjp23 4 Solution Challenge Japan について
5. GDSC TMU について 5 Tomohiro Tani @taniiicom
6. - 東京都立大学 (南大沢・日野) を拠点 - 勉強会・プロジェクト・コミュニケーション - 自由さ、オープンさ - 『個からはじまるイノベーション』 - 個人の創作や活動をサポート 6 GDSC TMU について
7. Solutions from GDSC TMU 7 Tomohiro Tani @taniiicom
8. metreee.com 都立大発 Misskey インスタンス 8 Tomohiro Tani @taniiicom
10. Quuum.com #耐久メーカー 10 Tomohiro Tani @taniiicom
12. TMU Map https://github.com/gdsc-tmu/tmu_map Yujiro Kisu 12
13. TMU Map Yujiro Kisu 13
14. Airsoft Realistic Shooting Takuo Yamaguchi 14
16. 石池 https://ishiike.herokuapp.com あゆ @aya172757 16
18. iQbe https://github.com/woodnext/iqbe Shun Kotsugi 18 Shun Kotsugi
20. Flutter を触ってみよう Aoi Ohta @marshma84093472 同じくFlutter初心者です．一緒にやりませんか？ 20
21. Flutter とは？ - 21
22. • UIツールキット：GUIを開発するためのツールの集合体（キット） • Dart 言語を使用　 Dash (Dart のマスコットキャラクター)↓ GoogleがつくったUIツールキット 22
23. Flutter のおもしろいポイント - 別の環境と比べて感じたこと 23
24. ボタンも画面も全部ウィジェット 画面に大きさ自由のタイルが敷き詰められているイメージ？ すべてがウィジェットでできている 24
25. • refactorとか • カッコが勝手に移動するとか （意味が分からないと思いますがやってみればわかります） • 勝手にコメントつけてくれるとか コード補完機能が強い（ローカル環境のみ） 25
26. • セミコロンが必要 • 中カッコが必要 • ライブラリのインポート文は　import • クラスの要素へはドット（．）でアクセス • print() でテキスト出力できる Cとpythonを足して二で割ったかんじ 26
27. ctrl+Sでコードを更新 ↓ 次の瞬間プレビューに反映（・・） プレビュー環境をweb（webアプリ）にするとホットリロードが効かないので，web 以外にするのがおすすめです ホットリロードは凄すぎ 27
28. ひとつのコードでモバイル，Web，デスクトップの各環境に対応したアプリができる マルチプラットフォーム対応 28
29. Flutter を触ってみよう - 29
30. 今回つくるアプリ 30
31. • ここからは、皆さんがローカルでFlutterの環境構築をすでに完了している前提で 進みます． • もし環境構築ができていない方は、オンラインエディタのDartPadを使ってみてく ださい（チャットでURLを送ります） • VS Code での操作を前提とした記述が度々ありますがご了承ください ❕環境構築は完了していますか？ 31
32. 1. VSCode のコマンドパレット (F1 or ctrl+shift+P or cmd+shift+P) 2. Flutter new と検索 3. Flutter: New Project を選択 これ以降，スライドに書かれた操作を完了したら 挙手ボタンを押してください！ プロジェクトを作成 32
33. codelabの p.3 から以下のコードを探して自分のプロジェクトにコピペ • pubspec.yaml (namer_app のところをプロジェクト名に置き換え) • analysis_options.yaml • lib/main.dart 元コードを貼りつけ 33
34. スマホ複数台持ちの方は一台ぐらい開発者モードにしてもいいのでは？ 1. 保存 2. run / 実行　 3. ターゲットデバイスの選択 スマホでプレビューしたい場合はこれより前にスマホをPCに接続 4. プレビューが表示されるはず 初・実行 34
35. 1. codelab の p.4 の lib/main.dart で指示されている部分のコードを変更 2. ctrl+s 一瞬でプレビューが変わったのが分かりましたか？ ホットリロード 35
36. p.4 の Adding a button にある lib/main.dart のコメントの指示に従う debug console に何か表示されるようになったはず ボタンを追加してみる 36
37. かいせつ - コードを見ながら聞いてください 37
38. ほぼコードラボの和訳です。。 • すべての構成要素はwidget（アプリそのものもwidget） • MyApp クラス ◦ StatelessWidget を拡張（継承と同義？） ◦ アプリ全体の設定（アプリ名，テーマ，home widget（home: MyHomePage()）） • MyAppState クラス ◦ アプリ全体の state を定義 ◦ 動作に必要なデータを保持（今はwordpairしかないけど） ◦ ChangeNotifier を拡張 ▪ ChangeNotifier: state とデータの変更を各 widgets に通知 • ChangeNotifierProvider: state 作成 ✒コードの解説 38
39. ほぼコードラボの和訳です。。 • build() ◦ すべての widgets が持っている ◦ widget の状態が変化した際に自動的にコールされる ◦ 絶対に widget(s) を return しなければならない（この場合scaffold） • watch メソッド：アプリの現在の state を監視 • column：列．子要素を上から下に並べる • 2番目のText：WordPairをLowerCaseで出力している • 最後のカンマは不要（あるとフォーマットがきれいになる） ✒コードの解説② 39
40. 写真撮影後，休憩（5分） 15：05　にお戻りください 40
41. 仕事させましょう • p.4 の Your First Behavior のところにあるコードの指示にしたがう ◦ getNext() 関数を追加 ボタンに機能を持たせてみる 41
42. Refactor という魔法が登場 1. p.5のとおり変更→refactorを使用するところを最小限に 2. Text に Refactor : Extract Widget を使用 i. Text の文字の上で右クリック ii. 出てきたメニューからRefactorを選択 3. BigCard と名付ける→自動的に BigCard クラスが追加 自動変更を使ってもアプリが問題なく動くことを確かめてみてください！ ワードを目立たせてみる① 42
43. Refactor という魔法が登場 1. BigCard クラスの中の Text に Refactor: Wrap with Padding をかける 2. padding の中の数字を適当に調整（デフォルトは8，おすすめは20） 3. Padding に Refactor : Wrap with Widget をかける．名前は Card ワードを目立たせてみる② 43
44. アプリにはテーマカラーを設定できるらしい… • BigCard の build() メソッドを指示通りに変更 ◦ アプリの現在のテーマを取得 ◦ カードの色をテーマのcolorSchemeと同じになるように設定 • MyApp の ColorScheme.fromSeed() の引数を変更 色の変わり方がきれいすぎるのでやってみてください… カードの色・テーマを変えてみる 44
45. だいぶそれっぽくなる コードの冒頭に 文字の色・スタイルを変える 45
46. きれいになるはず BigCard は Column の中にあるので… 1. Column の中の要素を中央ぞろえ body.Column( 　の下にmainAxisAlignment: MainAxisAlignment.center, 2. Column そのものを中央ぞろえ Column に Wrap with Center の Refactor をかける オプション：カードとボタンの間に SizedBox(height: 10), を入れると？ 中央ぞろえ 46
47. 配列（リスト）・集合などは普通に使えるらしい とりあえずお気に入り格納用リストとロジックを追加する MyAppState の末尾に以下を追加 お気に入り機能をつくってみる① 47
48. もうだいぶ分かってきたかもしれませんが Likeボタンを追加する手順 1. すでにあるボタンを Refactor で Wrap with Row 2. Row( の下に mainAxisSize: MainAxisSize.min, を追加 👆確保する横軸サイズを最小限に抑える 3. Likeボタンを作成　←手本無しチャレンジ お気に入り機能をつくってみる② 48
49. このままだとお気に入りしたワードが見えないので 1. MyHomePage クラスを全部コメントアウト 2. p.7 指定のコードに置き換え　もったいないですが時短のためご理解ください 画面分割してみる 49
50. SafeArea を Expanded に置き換えてみるとExpanded が理解しやすいです 1. scaffold 以外の MyHomePage が全部 GeneratorPage に Extract された 2. 新しいMyHomePageのrowの中: a. SafeArea（スマホのステータスバー等で隠されない） NavigationNail onDestinationSelected: ボタン操作に応じて切り替えられるようになります b. Expanded：限界までスペースを使う設定 　　　　　　　　　　　　　　　GeneratorPageもこの中で呼び出す ✒置き換えたコードの解説 50
51. 画面切り替えで必要になります widgets が増えてきた ↓ MyAppState に他の widget の状態 (state) を保持してほしくない （グローバル変数をできるだけ作りたくないのと同じ） ↓ widget 本体が状態を保持してくれればいい！ ↓ MyHomePage を StatefulWidget に変換！ （Refactor>Convert to StatefulWidget） 【重要】Stateful Widget 登場 51
52. ちょっとした腕試し ほぼノーヒントです！ 今までのコードを参照すればなんとなくつくれるはず… 参考： • ListView: スクロールできるスペース • context.watch<MyAppState> • for 文が使えます • より詳しいことはcodelab p.8を参照 お気に入り画面を完成させる 52
53. ちょっとした腕試し TextField() で入力フォームがつくれます 入力フォームをつくるだけ→すぐできる フォームに入れた文字を保存する→時間かかるかも ※コードラボ本体に無いです カスタムワード入力をつくってみる 53
54. クロージング 54
55. おつかれさまでした！ フリータイムです 55