Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter入門講座

 Flutter入門講座

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

bugdog24

March 25, 2023
Tweet

More Decks by bugdog24

Other Decks in Programming

Transcript

  1. <<
    Flutter
    入門講座

    View Slide

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

    View Slide

  3. 1
    Flutterとは

    View Slide

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

    View Slide

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

    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