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

本日の流れ
 10 分 自己紹介・Flutterについて説 明 80 分 ハンズオン 30 分 トーク・自由開発 

①自己紹介・Flutterについて説明
 10 分 自己紹介・Flutterについて説 明 80 分 ハンズオン 30 分 トーク・自由開発 

自己紹介
 吉川 楓馬(よしかわ ふうま)
 
 九州産業大学　理工学部　
 情報科学科　２年
 
 2002年9月18日
 
 大分県
 
 最近、Unityをはじめました！
 ゲーム作り楽しいです！
 　　名前：
 
 　　所属：
 
 
 生年月日：
 
 　出身地：
 
 　　一言：
 

Flutterとは？
 

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

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

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!" である 

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入門｣より一部抜粋 

それではLet’s try it!!
 

②ハンズオン
 10 分 自己紹介・Flutterについて説 明 80 分 ハンズオン 30 分 トーク・自由開発 

本日の ゴール
 自己紹介アプリを作ってみよう！ 
 [おまけ]画面遷移をしてみよう！ 
 
 [名前]という見出し、氏名、一言コメン トの表示
 
 ボタンと画面遷移の実装をしてみま しょう！
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

③トーク・自由開発
 10 分 自己紹介・Flutterについて説 明 80 分 ハンズオン 30 分 トーク・自由開発 

トーク・自由開発
 ここからはトーク・自由開発です！！
 参加は任意です。
 みなさんが作ってみたいようにアプリをアレンジしてみましょう！
 

振り返り　-FlutterのUIを表すコードの特徴-
 まるで設定ファイルを記述するように「これを使う」「この値はこう」といったコーディングスタイル 「宣言型プログラミング」 コードの書き方・読み方の要領 「Widgetの中にプロパティを渡してあげる」 return Visibility( visible: _isVisible, child: const Padding( padding: const EdgeInsets.all(16), child: Text('Hello, Flutter!'), ), ); 

トーク・自由開発
 アレンジのヒント
 ● appBarやbodyの色を変えてみる
 (backgroundColorプロパティ、
 backgroundColor: Colors.red)
 ● 新しくテキストを加える、テキストの書式を変える
 (新しくTextウィジェットを追加する、
 fontStyle： FontStyle.italic)
 ● レイアウトを変える
 (Row、SizedBox、Padding)
 

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

参考
 ● 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)