はじめに

Qiita 初投稿です。
至らぬ点が多々ありますが、温かいコメント等でご指摘いただけると嬉しいです。

文章にセンスが無いので、”記事を投稿”する事には距離を置いてましたが、会社のイベントで Qiita への投稿が必要になったので、これを機会に「自分のメモ＋α」として Qiita へ投稿させて頂こうと思います。

Flutter はもちろん、モバイル系は未経験ですが、「同じコードで、Android、iOS、Web でも OK」と聞いたので、モバイル系にも挑戦してみる事にしました。

まず今回は、会社のLT会向けに > flutter create で作成する"最初のサンプル"を動かしてみます。

開発環境

OS : Windows 11 Pro
Flutter : 3.24.3
Dart : 3.5.3
Cursor(IDE) : 0.42.3
Android Studio : Koala Feature Drop | 2024.1.2

Flutter とは？

Googleが提供するモバイルアプリフレームワーク
Dartで記載するけど、裏では Dart 以外にも C++や C#など様々なプログラムが動いて Flutter のアプリ開発を支えてる

Flutter の特徴

クロスプラットフォーム技術
- さまざまなOS（Android／iOS／Web／Windows／macOS）に対応することが可能
Dart
- 静的型付け言語。実は動的型付けも出来る
- オブジェクト指向言語。一部関数型プログラミングの機能も備えているらしい
  - サクッとDartを触りたい人は、ブラウザだけで Dart を体験できる Dartpad がおススメです

OSごとに独自に搭載されている機能は個別に開発する必要があるので注意！

Flutter の基本的なコマンド

プロジェクトを作成
- > flutter create [プロジェクト名]
ツールの設定状況を確認
- > flutter doctor
アプリを起動する際に使えるデバイスを確認
- > flutter devices
アプリを起動
- > flutter run -d [デバイスID]
パッケージをインストール
- > flutter pub add [パッケージ名]

開発環境の準備

インストール
- Flutter SDK
- Android Studio
  - モバイル系やってない人は、”おぉ”ってなるから入れてほしい
環境ツールの状況確認
- > flutter doctor
  - 全てのチェックをクリアする事は必須じゃないので、利用する部分だけで OK

サンプルプロジェクトの作成

Flutter 最初のサンプル"
- > flutter create flutter_first_application

サンプルプロジェクトのディレクトリ＆ファイル

flutter_first_application
├── android                -> コードに変換する際に参照
├── ios                    -> コードに変換する際に参照
├── linux                  -> コードに変換する際に参照
├── macos                  -> コードに変換する際に参照
├── web                    -> コードに変換する際に参照
├── windows                -> コードに変換する際に参照
├── analysis_options.yaml  -> Dartを解析する際の設定ファイル
├── lib                    -> ソースコード
│   └── main.dart          -> アプリのエントリーポイント
├── pubspec.lock           -> 依存関係を解決した結果
├── pubspec.yaml           -> パッケージの依存関係
├── test                   -> テストコード
├── test_flutter.iml       -> IntelliJ IDEA用らしい
└── README.md

※見やすいようにディレクトリの順番を入れ替えてます

サンプルアプリケーションの動作

サンプルアプリケーションのポイント

簡単なサンプルですが、下記の点がポイントだと感じました

Widget

Widget って単位で画面が描画される
ツリー構造で UI が構成される

比較

画面	イメージ	プログラム

State

State クラスが状態を管理するクラス
- State クラスは StatefulWidget の createState メソッドで返され、この２つのクラスは必ず対になっている必要があります
State クラスが持つ変数の更新を検知すると、自身のbuildメソッドを再度呼び出す
StatelessWidget クラスと StatefulWidget クラス

おわりに

Flutter サンプルを作ってみて

カッコ多すぎ､､､
- IDE 様のお力をお借りして解決できるのか
Widget の中身が積みあがっていくので、コードがゴチャゴチャしている
- もっと複雑な画面になる事を考えるとツライ
デザインもロジックとして 1 ファイル内に混在するのでゴチャゴチャしている
- 今後はファイルを分割したりすると、もっとスッキリするのかな
Android Studio を使って、やった気になれる
- 「おぉ」ってなれました。Android 部分も作った気になってます

記事を書いてみて

思ったより書く事に時間が掛かる
- この記事に2時間以上もかかりました､､､　次回はもっとライトに記載しようと思います
理解の足りない部分が見えてくる
- 記載時に違った角度で考えると理解不足してる箇所が出てくる