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 full-size slide

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

    View full-size slide

  3. 1
    Flutterとは

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 2
    Flutter
    眺めてみる

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. lib/main.dart

    View full-size slide

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

    View full-size slide

  14. まずはmainから

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. アプリ全体の設定
    MyApp

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. アプリ全体の見た目

    View full-size slide

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

    View full-size slide

  27. アプリの本体
    _MyHomePageState

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 下の文でこうなる

    View full-size slide

  33. ここが対応

    View full-size slide

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

    View full-size slide

  35. 中心にものをおく

    View full-size slide

  36. 下の文だとこうなる

    View full-size slide

  37. 縦に要素を並べる

    View full-size slide

  38. 下の文だとこうなる

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. _counter = 0である

    View full-size slide

  47. 右下の丸いやつ

    View full-size slide

  48. 右下の丸いやつ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. この部分

    View full-size slide

  52. _counterの値に1を足す

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. コード読解終了

    View full-size slide

  57. 3
    Flutter
    書いてみる

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. MyAppを変更する

    View full-size slide

  62. MyAppを変更する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  70. 講座終了!
    お疲れさまでした!

    View full-size slide