プログラミング

【Flutter】Flutter入門・チュートリアル

事前準備

チュートリアルを実施するにあたって、まずはFlutterの環境構築が必要となります。
以下の記事で環境構築の実施方法をまとめています。

既に環境構築が済んでいる場合は、早速チュートリアルを実施していきましょう。

チュートリアル用サイト

Googleが公開しているチュートリアル形式の教育コンテンツのCodelabs内のサイトが以下になります。
まずはとりあえず動かしてイメージを掴みたい場合はこちらから実施していくと良いかと思います。

概念から理解したい場合は以下の英語版公式ドキュメントの日本語訳サイトが良いかと思います。
どちらの順番でも問題ないですが、両方とも目を通しておくと全体感を掴むための一歩目としては十分ではないでしょうか。

ざっくりまとめ

基本的にはチュートリアルサイトで一通り実施してもらえれば終わりですが、個人的な学習も兼ねて理解した内容をまとめたいと思います。

レイアウト

https://flutter.ctrnost.com/basic/layout/layout/

Flutterアプリで使われている画像、アイコン、テキストは全て基本Widgetで出来ている。
各Widgetをどこにどうやって配列するかで表示のレイアウトが決まる。
WidgetはhtmlやXMLなどのツリー構成をイメージすると分かりやすい。

概念

Container・・・Widgetの1つのまとまり、縦横の子要素を配置する場合はコンテナ内にColumnとRowを定義する。

Column、Row・・・縦、横方向の子要素

Text、Icon・・・文字と画像などを定義する。コンテナ直下やカラム、ロウ内などに定義して色やフォント、大きさなどを設定する。

Container
└── Row
            └── Column
                        ├── Icon
                        └── Container
                                     └── Text

https://flutter.ctrnost.com より引用

ツリー構造化すると以下のイメージ

https://flutter.ctrnost.com より引用

Googleはマテリアルデザインを推奨しており、Flutterでの開発では「MaterialApp」クラスや「Scaffold」クラスなどを利用して簡単に作成することが出来る。

Container

コンテナで操作出来る内容

  • 色
  • テキスト
  • 配置
  • 揃え
  • 変化
    • X,Y,Z軸の回転や尺度(Scale)の変更、子要素の位置変更(translate)などができる

Column & Row

カラムとロウで操作出来る内容

  • Column
    • 行
  • Row
    • 列
  • 入れ子
    • 行列を入れ子にすることで表形式でレイアウトすることができる
  • 配置
    • ちょっと特殊
    • mainAxisAlignmentとcrossAxisAlignmentで位置を調整する

AxisAlignment

ウィジェットの配置について詳しく

https://flutter.ctrnost.com/basic/layout/axisalignment/

ListView

一覧作成などスクロール可能なウィジェットをリスト化する際に使用する

https://flutter.ctrnost.com/basic/layout/listview/

GridView

写真などの画像をボックス上のレイアウトに配置してスクロール可能

https://flutter.ctrnost.com/basic/layout/gridview/

Stack

ウィジェットを重ねることが可能

https://flutter.ctrnost.com/basic/layout/stack/

Card

付箋型のノートみたいなやつ

https://flutter.ctrnost.com/basic/layout/card/

インタラクティブ

ユーザの入力や操作で使用できる項目

https://flutter.ctrnost.com/basic/interactive/

  • ボタン
  • テキストフォーム
  • チェックボックス
  • ラジオボタン
  • スイッチ
  • スライダー
  • 日付選択（カレンダー操作）

ナビゲーション

https://flutter.ctrnost.com/basic/navigation/

  • AppBar
    • 一番基本なヘッダー
  • BottomNavigationBar
    • 画面下部に配置するメニュー
  • TabBar
    • タブ形式で配置するメニュー
  • SliverAppBar
    • スクロールに応じてヘッダー要素を隠すことができるようになるウィジェット
  • Drawer
    • ハンバーガーメニューを配置する

画面遷移（Navigator）

https://flutter.ctrnost.com/basic/routing/

Flutterの画面遷移では、遷移すると前の画面の上に1つ画面が被さる（プッシュ）状態になり、遷移させる。
前の画面に戻る場合は一番上のウィジェットを取り除く（ポップ）ことで遷移させる。
画面遷移の方法は2種類あり、事前にroutesを登録して遷移先を決める方法と、必要に応じてroutesを登録するやり方がある。

まとめ

以上で基本的なチュートリアルは終了です。
概念を理解出来てしまえば、あとは慣れるだけですので引き続きサンプルアプリの作成をしていきたいと思います。

-プログラミング