はじめに
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時間以上もかかりました､､､ 次回はもっとライトに記載しようと思います
- 理解の足りない部分が見えてくる
- 記載時に違った角度で考えると理解不足してる箇所が出てくる