Flutter入門講座

初心者向けのFlutter資料です。
おみくじアプリの作成を行う中でFlutterでの開発について学べます。

Transcript

1. << Flutter 入門講座
2. 工学部３年生 自称Androidエンジニア 趣味：刀鑑賞、将棋、プログラミング @bugdog24 オキリョウ
3. 1 Flutterとは
4. Flutterとは 以下のようなアプリケーションを作るためのツール • Androidアプリ • iOSアプリ(iPhone) • Webページ プログラミング言語「Dart」で記述する
5. Flutterの利点 Googleが全力でサポートしてい るため、廃れることはなさそう Google製 従来: それぞれのコードが必須 Flutter: １つだけで動く めっちゃ楽
6. 低コスト高品質なものが作れる ベンチャーを中心に人気
7. 2 Flutter 眺めてみる
8. 開発用アプリを立ち上げる このアイコンを探してダブルクリックする
9. こいつは何なのか プログラムの編集に使われるアプリ - 読みやすいように色をつけてくれる - 文字列の一括変更ができる - etc...
16. アプリを起動してみる
21. プログラムを見てみる
22. lib/main.dart
24. 大体60行ちょいくらい これくらいなら読めそう？
25. まずはmainから
26. アプリの開始地点 アプリを起動すると、mainのかっこの中を上 から実行する
27. アプリの開始地点 この文を追加して実行すると・・・
28. アプリ全体の設定 MyApp
29. アプリ全体の設定 この文を追加して実行すると・・・
30. どういう内容を描写するのか指示 この文を追加して実行すると・・・
31. Webページのタイトル この文を追加して実行すると・・・
32. アプリの色セット この文を追加して実行すると・・・
33. アプリの表示内容 この文を追加して実行すると・・・
34. 好きな色に変えてみる この文を追加して実行すると・・・
35. アプリ全体の見た目 　MyHomePage
36. アプリ全体の見た目
37. 状態を持つページを作成している
38. アプリの本体 _MyHomePageState
39. アプリの本体 長いため buildから見ていく
40. アプリの見た目を作る
41. アプリの見た目を作る
42. アプリの上の部分を作る
43. 下の文でこうなる
44. ここが対応
45. アプリの真ん中部分を作る
46. 中心にものをおく
47. 下の文だとこうなる
48. 縦に要素を並べる
49. 下の文だとこうなる
50. ここの文字を消すと上に
51. これによって中央寄せになってる
52. ちなみにRowという要素も あります
53. この二つの要素で真ん中に表示
54. 指定した文字を画面に出力する
56. _counterの中身を画面に出力する
57. 対応する文字に色がつく
58. _counter = 0である
60. 右下の丸いやつ
61. 右下の丸いやつ
62. クリックされた時に実行される内容
63. クリックして確認してみる
64. この部分
65. _counterの値に1を足す
66. つまり 1. クリックする 2. _counterが足される 3. Textで表示される
67. 長押しの時に出てくる文字
68. アイコン(適当なものに変えてみると？)
69. コード読解終了
70. 3 Flutter 書いてみる
71. 今回はおみくじアプリを 書いてみる
73. 一つずつコードを書いてみる
74. 1.タイトルを変更する
75. MyAppを変更する
76. MyAppを変更する
77. 2.「おみくじ開始」を出す
83. 3.クリックで文字を大吉に 変える
85. 4.クリックでランダムな 文字に変える
86. 大吉、中吉、etc… ここからランダムで一つ選ぶ ようにしたい
89. リストをシャッフルして、 先頭の要素を取得する ということ
90. 5.いらない文字列を消す
92. 6.ボタンのアイコンを変更
95. 完成！
96. 講座終了！ お疲れさまでした！