サンプルを使って学ぶFlutter

エンジニアカフェ
2022年9月25日　開催

Transcript

1. サンプルを使って学ぶFlutter
 2022 年 9 月 25 日

2. 本日の流れ
 10 分 自己紹介・Flutterについて説 明 80 分 ハンズオン 30 分 トーク・自由開発
3. ①自己紹介・Flutterについて説明
 10 分 自己紹介・Flutterについて説 明 80 分 ハンズオン 30 分 トーク・自由開発
4. 自己紹介
 吉川 楓馬(よしかわ ふうま)
 
 九州産業大学　理工学部　
 情報科学科　２年
 
 2002年9月18日
 
 大分県
 
 最近、Unityをはじめました！
 ゲーム作り楽しいです！
 　　名前：
 
 　　所属：
 
 
 生年月日：
 
 　出身地：
 
 　　一言：

5. Flutterとは？

6. Flutter
 • googleが提供するモバイルやデ スクトップ向けのオープンソース のフレームワーク
 
 • 言語はDart
 

7. Flutterで作られているアプリ
 • Google Assistant 
 Googleが開発した人工知能を搭載したバーチャルアシスタント。いわゆ るお手伝いアプリ。
 • BMW
 ドイツに拠点を置く自動車メーカーのアプリ。自動車とアプリを連携する ことでスマホで自動車を操作できる。
 • 九州大学(非公式)
 九州大学の卒業生が開発。学生証の登録や、講義の過去問、大学の ニュース、キャンパス周辺の天気等がチェックできる。

8. Everything is Widget　-FlutterのUIを表すコードの特徴-
 Flutter には "Everything is a Widget" というスローガンがあります。 これは、UI を構築する全ての要素をWidgetとして表現する（つまり、 Widget クラスのサブクラスとして定義する）ことを目指した 設計で、 Flutter 最大の特徴の1つに上げられることも多い考え方です。 @chooyan_eng｢Flutterで仕事したい人のためのWidget入門｣より一部抜粋 return Visibility( visible: _isVisible, child: const Padding( padding: const EdgeInsets.all(16), child: Text('Hello, Flutter!'), ), ); _isVisible 変数が true であれば、四方を 16 のパディングで囲 まれた Text で 'Hello, Flutter' を画面に表示する • Visibility を配置する • 表示 / 非表示の判定には _isVisible の値を使用す る • Visibility の child は Padding である • Padding の値は padding プロパティにセットした通り である • Padding の child は Text である • Text が表示する文字列は "Hello, Flutter!" である
9. Everything is Widget　-FlutterのUIを表すコードの特徴-
 まるで設定ファイルを記述するように「これを使う」「この値はこう」といったコーディングスタイルを 「宣言型プログラミング」と呼びます。 コードの読み方 1. Visibilityを生成し、visibleとchildという引数(プロパ ティ)を渡すコードを追加する 2. childにPaddingを配置し、同様にpaddingとchildと いうプロパティを渡す 3. childにTextを配置して'Hello, Flutter!'を表示する return Visibility( visible: _isVisible, child: const Padding( padding: const EdgeInsets.all(16), child: Text('Hello, Flutter!'), ), ); @chooyan_eng｢Flutterで仕事したい人のためのWidget入門｣より一部抜粋
10. それではLet’s try it!!

11. ②ハンズオン
 10 分 自己紹介・Flutterについて説 明 80 分 ハンズオン 30 分 トーク・自由開発
12. 本日の ゴール
 自己紹介アプリを作ってみよう！ 
 [おまけ]画面遷移をしてみよう！ 
 
 [名前]という見出し、氏名、一言コメン トの表示
 
 ボタンと画面遷移の実装をしてみま しょう！

13. サンプルプログラムを起動してみよう
 プログラムを実行するにはエミュレータ(PC上に作れる仮想のスマホ端末)を起動する必 要がある。
 
 
 Android Studioにおいてエミュレータの起動には2種類ある。
 
 
 1. Android Studioと同じ画面内で実行
 2. スタンドアローンで実行
 
 今回はどちらでエミュレータを起動してもOKです！

14. サンプルプログラムを起動してみよう ~共通~
 ①Device Managerを開く

15. サンプルプログラムを起動してみよう ~共通~
 ②Create deviceを開く

16. サンプルプログラムを起動してみよう ~共通~
 ③｢Pixel 3a｣を選択し、Nextを 押す

17. サンプルプログラムを起動してみよう ~共通~
 ④任意のAPI Levelを選び、 Nextを押す
 今回は、S(API Level31)にす る

18. サンプルプログラムを起動してみよう ~共通~
 ⑤Finishを押す

19. サンプルプログラムを起動してみよう ~Android Studioと同じ画面内で実行~
 ①エミュレータが追加されて いるので、Launchアイコンを 押してエミュレータを起動

20. サンプルプログラムを起動してみよう ~Android Studioと同じ画面内で実行~
 ②ツールバーのRunアイコン を押すと実行される

21. サンプルプログラムを起動してみよう ~Android Studioと同じ画面内で実行~
 ⑧Done!!

22. サンプルプログラムを起動してみよう ~スタンドアローンで実行~
 ①ツールバーのプルダウンメ ニューから｢Open Android Emulator｣を選択しエミュレー タを起動する。
 

23. サンプルプログラムを起動してみよう ~スタンドアローンで実行~
 ②ツールバーのRunアイコン を押すと実行される
 
 ③Done!!

24. サンプルプログラムを起動してみよう ~スタンドアローンで実行~
 例外：｢Open Android Emulator｣をしたけど画面内で 起動した
 
 一度プロジェクトを閉じて、 [Customize]→[All settings…] →左上の検索欄に[emulator] と検索→[Emulator]の[Launch in a tool window]のチャックを 外す
 

25. サンプルプログラムを読もう①
 まずは邪魔なコメントを消してスッキリさせよう！！

26. サンプルプログラムを読もう②
 main関数
 void main() {
 runApp(const MyApp());
 }
 main.dartファイルを実行すると呼ばれるいわゆるエントリーポイントとなる関 数
 runApp関数はアプリを起動するための関数

27. サンプルプログラムを読もう③-1
 クラスに注目してみよう！
 class MyApp extends StatelessWidget{
 …
 }
 class MyHomePage extends StatefulWidget{
 …
 }

28. サンプルプログラムを読もう③-2
 StatelessWidgetとStatefulWidget
 FlutterのUIを表すパーツ(Widget)にはStatelessWidgetとStatefulWidgetの2種 類ある
 この２つの違いは状態を持つかどうかの違いである

29. サンプルプログラムを読もう③-3
 状態を持つとは？
 データを元にUIを作る仕組みのこと。
 例：チェックボックス
 
 チェックがついてない状態 
 
 value: false
 チェックがついている状態 
 
 value: true
 Checkbox(
 value: false,
 onChanged: () {},
 ),

30. サンプルプログラムを読もう③-4
 StatelessWidget
 State(状態)を持たないWidgetのこと。ゆえにWidgetの見た目が変化せず、常 に同じ状態で表示される。
 例：テキスト、アイコン、アイコンボタン

31. サンプルプログラムを読もう③-5
 StatelessWidget
 class (クラス名) extends StatelessWidget{
 @override
 …
 }

32. サンプルプログラムを読もう③-6
 StatefulWidget
 State(状態)を持つWidgetのこと。状態に応じて動的に見た目が変化する。
 StatelessWidgetと違い２種類のクラスが必要になる
 ・StatefulWidgetを継承したクラス
 ・状態を管理するStateクラス

33. サンプルプログラムを読もう③-7
 StatefulWidget
 class (クラス名1) extends StatefulWidget{
 @override
 State<(クラス名1)> createState() => _(クラス名2)();
 }
 
 class _(クラス名2) extends State<(クラス名1)>{
 @override
 …
 }

34. サンプルプログラムを読もう④-1
 ここからは実際にコードを書き換えながら解説していきます！
 _MyHomePageStateクラスの内容をみていきましょう！

35. サンプルプログラムを読もう④-2
 こんな感じになってる...
 
 @overrideから下を見てい きましょう！
 
 @overrid以下はbuilda関数 で画面UIを構成してい る！

36. サンプルプログラムを読もう④-3
 画面UIの構造
 
 ①Scaffold
 　appBarやbodyを管理する土 台のようなもの
 
 ②appBar
 　画面上部に表示するタイトル やアイコンなど
 
 ③body
 　メインとなる画面
 
 ④floatingActionButton
 　画面下部などに表示される ボタン

37. サンプルプログラムを読もう④-4
 appBarのテキスト
 
 AppBarウィジェットの中に titleプロパティ
 
 Textウィジェットで表示する テキストを操作できる
 
 widget.title
 → ‘自己紹介’

38. サンプルプログラムを読もう④-5
 floatingActionButton
 
 今回使わないので消す！
 
 一緒に_incrementCounter() も消す！(使わないので) 

39. サンプルプログラムを読もう④-6
 body内にあるUIのレイ アウト
 
 ①constをTextから <Widget>につける。constは コンパイル時に付けた変数 を定数にする役割を持つ
 
 ②_counterを表示するテキ ストを削除
 
 ③変数_counterの宣言を削 除する

40. サンプルプログラムを読もう④-7
 body内にあるUIのレイ アウト
 
 ④Textウィジェットを２つ追 加して上を名前、中を氏 名、下を一言にする
 
 ⑤Centerと mainAxisAlignment.center を削除してTextウィジェット の位置を左上にする

41. サンプルプログラムを読もう④-8
 body内にあるUIのレイ アウト
 
 ⑥crossAxisAlignment.start でTextを左揃えにする。

42. サンプルプログラムを読もう④-9
 
 
 こんな感じになると思う
 
 見出しをつけたい...
 
 隙間がなくて窮屈...
 
 文字の装飾をしたい！！

43. サンプルプログラムを読もう④-10
 文字の装飾
 
 ①ColumnをPaddingでWrap する。EdgeInsets.allを12px にする
 
 ②Textウィジェット内にstyle プロパティを使って、 TextStyleウィジェットを宣 言。fontWeightプロパティ、 fontSizeプロパティで字体と サイズを指定する。

44. サンプルプログラムを読もう④-おまけ
 画面遷移の実装
 
 ①ElevatedButtonを一言の 下に配置
 
 ②onPressedプロパティを 図のように記述して、child プロパティにはTextを配置 し、’次のページへ’

45. サンプルプログラムを読もう④-おまけ
 画面遷移の実装
 
 ③遷移先のDartファイルを 作る
 [lib]を右クリック → [New] → [Dart File] →[New Dart File]でDart Fileの名前を決 める 今回はSecondPage

46. サンプルプログラムを読もう④-おまけ
 画面遷移の実装
 
 ④SecondPageに図のよう に記述して画面のUIレイア ウトを作る。
 この時点ではまだエラーが 出て実行できない

47. サンプルプログラムを読もう④-おまけ
 画面遷移の実装
 
 ⑤main.dartに戻り、import 文を作成する

48. サンプルプログラムを読もう④-おまけ
 画面遷移の実装
 
 ⑥完成！！
 ボタンを押して画面遷移で きるか確かめてみましょ う！！

49. おつかれさまでした！！
 完成！！
 いかがでしたか？
 なんとな〜くでいいので開発の雰囲気を掴めていただけたならOKです！

50. ③トーク・自由開発
 10 分 自己紹介・Flutterについて説 明 80 分 ハンズオン 30 分 トーク・自由開発
51. トーク・自由開発
 ここからはトーク・自由開発です！！
 参加は任意です。
 みなさんが作ってみたいようにアプリをアレンジしてみましょう！

52. 振り返り　-FlutterのUIを表すコードの特徴-
 まるで設定ファイルを記述するように「これを使う」「この値はこう」といったコーディングスタイル 「宣言型プログラミング」 コードの書き方・読み方の要領 「Widgetの中にプロパティを渡してあげる」 return Visibility( visible: _isVisible, child: const Padding( padding: const EdgeInsets.all(16), child: Text('Hello, Flutter!'), ), );
53. トーク・自由開発
 アレンジのヒント
 • appBarやbodyの色を変えてみる
 (backgroundColorプロパティ、
 backgroundColor: Colors.red)
 • 新しくテキストを加える、テキストの書式を変える
 (新しくTextウィジェットを追加する、
 fontStyle： FontStyle.italic)
 • レイアウトを変える
 (Row、SizedBox、Padding)

54. トーク・自由開発
 アレンジのヒント
 • 今回紹介した他にもたくさんのWidgetがあるので下記リンクから参照 してみてください！
 
 Flutter Cookbook
 https://docs.flutter.dev/cookbook 
 
 QiitaFlutter:Widget一覧
 https://qiita.com/matsukatsu/items/e289e30231fffb1e4502 

55. 参考
 • kboy.”Widgetの 基 本 的 な 使 い 方 ”.zenn.2020-12-03 https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/0f62d6(参照2022-08-15) • kurarara.”Flutter でサンプルプログラムを理解する”.qiita.2019-12-26 https://qiita.com/kurararara/items/73deac522ad9fea36abc( 参 照 2022-08-15) • ダーフク.”【Flutter 入 門 】StatelessWidgetとStatefulWidgetの 違 い ”.TECHRISE.2020-12-27 https://tech-rise.net/difference-between-stateless-widget-and-stateful-widget/#index_id0( 参 照 2022-08-15) • kooooones.”あれもこれもFlutterで 開 発 されてるって、マ？？”.zenn. 2022-03-21 https://zenn.dev/kooooons/articles/814cc48f6b927a( 参 照 2022-08-15) • flutter-study.dev” 状 態 を 持 ったWidget” https://www.flutter-study.dev/widgets/state-widget (参照2022-09-16) • Flutterで 仕 事 したい 人 のための Widget 入 門 .qiita.2021-01-05 https://qiita.com/chooyan_eng/items/6f15868cedcc85827eeb#everything-is-a-widget( 参 照 2022-09-23)