Flutter入門講座

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

Transcript

1. <<
   Flutter
   入門講座
   

   View Slide

2. 工学部３年生
   自称Androidエンジニア
   趣味：刀鑑賞、将棋、プログラミング
   @bugdog24
   オキリョウ
   

   View Slide

3. 1
   Flutterとは
   

   View Slide

4. Flutterとは
   以下のようなアプリケーションを作るためのツール
   ● Androidアプリ
   ● iOSアプリ(iPhone)
   ● Webページ
   プログラミング言語「Dart」で記述する
   

   View Slide

5. Flutterの利点
   Googleが全力でサポートしてい
   るため、廃れることはなさそう
   Google製
   従来: それぞれのコードが必須
   Flutter: １つだけで動く
   めっちゃ楽
   

   View Slide

6. 低コスト高品質なものが作れる
   ベンチャーを中心に人気
   

   View Slide

7. 2
   Flutter
   眺めてみる
   

   View Slide

8. 開発用アプリを立ち上げる
   このアイコンを探してダブルクリックする
   

   View Slide

9. こいつは何なのか
   プログラムの編集に使われるアプリ
   - 読みやすいように色をつけてくれる
   - 文字列の一括変更ができる
   - etc...
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. アプリを起動してみる
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. プログラムを見てみる
    

    View Slide

22. lib/main.dart
    

    View Slide

23. View Slide

24. 大体60行ちょいくらい
    これくらいなら読めそう？
    

    View Slide

25. まずはmainから
    

    View Slide

26. アプリの開始地点
    アプリを起動すると、mainのかっこの中を上
    から実行する
    

    View Slide

27. アプリの開始地点
    この文を追加して実行すると・・・
    

    View Slide

28. アプリ全体の設定
    MyApp
    

    View Slide

29. アプリ全体の設定
    この文を追加して実行すると・・・
    

    View Slide

30. どういう内容を描写するのか指示
    この文を追加して実行すると・・・
    

    View Slide

31. Webページのタイトル
    この文を追加して実行すると・・・
    

    View Slide

32. アプリの色セット
    この文を追加して実行すると・・・
    

    View Slide

33. アプリの表示内容
    この文を追加して実行すると・・・
    

    View Slide

34. 好きな色に変えてみる
    この文を追加して実行すると・・・
    

    View Slide

35. アプリ全体の見た目
    　MyHomePage
    

    View Slide

36. アプリ全体の見た目
    

    View Slide

37. 状態を持つページを作成している
    

    View Slide

38. アプリの本体
    _MyHomePageState
    

    View Slide

39. アプリの本体
    長いため
    buildから見ていく
    

    View Slide

40. アプリの見た目を作る
    

    View Slide

41. アプリの見た目を作る
    

    View Slide

42. アプリの上の部分を作る
    

    View Slide

43. 下の文でこうなる
    

    View Slide

44. ここが対応
    

    View Slide

45. アプリの真ん中部分を作る
    

    View Slide

46. 中心にものをおく
    

    View Slide

47. 下の文だとこうなる
    

    View Slide

48. 縦に要素を並べる
    

    View Slide

49. 下の文だとこうなる
    

    View Slide

50. ここの文字を消すと上に
    

    View Slide

51. これによって中央寄せになってる
    

    View Slide

52. ちなみにRowという要素も
    あります
    

    View Slide

53. この二つの要素で真ん中に表示
    

    View Slide

54. 指定した文字を画面に出力する
    

    View Slide

55. View Slide

56. _counterの中身を画面に出力する
    

    View Slide

57. 対応する文字に色がつく
    

    View Slide

58. _counter = 0である
    

    View Slide

59. View Slide

60. 右下の丸いやつ
    

    View Slide

61. 右下の丸いやつ
    

    View Slide

62. クリックされた時に実行される内容
    

    View Slide

63. クリックして確認してみる
    

    View Slide

64. この部分
    

    View Slide

65. _counterの値に1を足す
    

    View Slide

66. つまり
    1. クリックする
    2. _counterが足される
    3. Textで表示される
    

    View Slide

67. 長押しの時に出てくる文字
    

    View Slide

68. アイコン(適当なものに変えてみると？)
    

    View Slide

69. コード読解終了
    

    View Slide

70. 3
    Flutter
    書いてみる
    

    View Slide

71. 今回はおみくじアプリを
    書いてみる
    

    View Slide

72. View Slide

73. 一つずつコードを書いてみる
    

    View Slide

74. 1.タイトルを変更する
    

    View Slide

75. MyAppを変更する
    

    View Slide

76. MyAppを変更する
    

    View Slide

77. 2.「おみくじ開始」を出す
    

    View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. 3.クリックで文字を大吉に
    変える
    

    View Slide

84. View Slide

85. 4.クリックでランダムな
    文字に変える
    

    View Slide

86. 大吉、中吉、etc…
    ここからランダムで一つ選ぶ
    ようにしたい
    

    View Slide

87. View Slide

88. View Slide

89. リストをシャッフルして、
    先頭の要素を取得する
    ということ
    

    View Slide

90. 5.いらない文字列を消す
    

    View Slide

91. View Slide

92. 6.ボタンのアイコンを変更
    

    View Slide

93. View Slide

94. View Slide

95. 完成！
    

    View Slide

96. 講座終了！
    お疲れさまでした！
    

    View Slide