こんにちは、社畜ママです！
先月までPHP＋vue.jsの開発をしていたのですが、今月からFlutterを使ったスマホアプリの開発にも携わることになりました。
初めてだらけだったので復習の意味を込めて、Flutterについてまとめていきたいと思います！
Flutter(フラッター)って何？
Flutterは、Googleが開発したUIフレームワークで、iOS、Android、Web、デスクトップ（Windows、macOS、Linux）向けのアプリを1つのコードベースで開発できるのが特徴です。
Dartというプログラミング言語を使い、ネイティブに近いパフォーマンスを持つアプリを作成できます。
Flutterで何ができるの？
1.iOS / Androidアプリの開発
・iPhone / iPadアプリの開発が可能
・1つのコードで両方のOSに対応
・ネイティブアプリ並みのパフォーマンス
2.Webアプリの開発
・Flutter for Webを使えば、ブラウザで動くアプリも作れる
3.デスクトップアプリの開発
・Windows、Mac、Linux向けのアプリも作成可能
Flutterのメリット
✔ マルチプラットフォーム対応 → 1つのコードで複数のプラットフォーム向けに開発
✔ 高速な開発（Hot Reload） → コードを書いてすぐに結果を確認できる
(自分の環境だとHot Reloadが効かない(笑))
✔ 美しいデザイン → カスタマイズ可能なUIウィジェットが豊富
✔ ネイティブに近いパフォーマンス → 直接GPUを使うので動作が軽い
✔ Googleがサポート → 長期的な発展が期待できる
Flutterのデメリット
✔ アプリサイズが大きくなりがち → ネイティブよりもサイズが少し大きい
✔ Dart言語の学習が必要 → Flutter専用の言語（Dart）を習得する必要がある
✔ 一部ネイティブ機能はプラグインが必要 → すべての機能をFlutterだけで実装できるわけではない
1つコードでiOSとAndroidのどちらも開発できるのはすごく便利ですね！
私が担当しているスマホアプリも1つコードでiOSとAndroidのアプリが開発されているので、複数のプラットフォームでアプリをリリースしたい場合はとても便利に思いました。
Flutterのファイル構成
では、次にFlutterのファイル構成について詳しく見ていきます。
Flutterのファイルを作成すると、以下のフォルダが作られます。
my_flutter_app/ ← プロジェクトのルートフォルダ
├── android/ ← Android用の設定やコード
├── ios/ ← iOS用の設定やコード
├── lib/ ← ⭐️ アプリのメインコード（ここを編集する）
│ ├── main.dart ← ⭐️ アプリの起点（最初に実行される）
│ ├── screens/ ← 画面ごとのファイルをここに入れる（例：home_screen.dart）
│ ├── widgets/ ← 小さい部品（ボタンやカードなど）を分ける場合に使う
│ ├── models/ ← データの型（User, Product など）を定義する場所
│ ├── services/ ← APIやFirebaseとの連携用のファイルを置く
├── assets/ ← 画像やフォントを保存するフォルダ
├── pubspec.yaml ← パッケージや画像の設定を書く（※重要）
├── test/ ← テスト用のフォルダ
├── build/ ← アプリをビルドしたときに自動で作られる（触らなくてOK）
よく使うファイルとフォルダ
| ファイル・フォルダ名 | 役割 |
|---|---|
| lib/ | アプリのメインコードを書く場所（ここが重要） |
| lib/main.dart | アプリが最初に実行されるファイル |
| lib/screens/ | 画面ごとにファイルを分ける（例：home_screen.dart） |
| lib/widgets/ | ボタンやカードなどの小さい部品を作る |
| lib/services/ | FirebaseやAPIとの通信をまとめる |
| assets/ | 画像やフォントを保存する場所 |
| pubspec.yaml | パッケージや画像の設定を書くファイル |
最初に編集するファイル
① main.dart（アプリの起点）
main.dart は、Flutterアプリが最初に実行されるファイルです。
簡単なアプリの例：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp()); // アプリを起動
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("初めてのFlutterアプリ")),
body: Center(child: Text("こんにちは、Flutter！")),
),
);
}
}
これを実行すると、アプリの画面に「こんにちは、Flutter！」と表示されます。
② pubspec.yaml（アプリの設定ファイル）
pubspec.yaml には、パッケージ（ライブラリ）や画像、フォントの設定を書きます。
例：画像を使う場合
flutter:
assets:
- assets/images/logo.png
この設定をすると、assets/images/logo.png の画像をアプリで使えるようになります。
③ screens/ フォルダを作って、画面を分ける
大きなアプリを作ると、コードが増えて main.dart だけでは管理が大変になります。
そこで、画面ごとにファイルを分けます！
例えば、lib/screens/home_screen.dart を作る：
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("ホーム画面")),
body: Center(child: Text("これはホーム画面です！")),
);
}
}
そして、main.dart でこの HomeScreen を呼び出す：
import 'package:flutter/material.dart';
import 'screens/home_screen.dart'; // 画面を読み込む
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomeScreen(), // ホーム画面を表示
);
}
}
これで、画面の管理が楽になります！
まとめ
📝 アプリのメインのコードは lib/ に書く
📝 最初に編集するのは main.dart（アプリの起点）
📝 画面ごとに screens/ フォルダを作って分けると便利
📝 画像やフォントを使うときは pubspec.yaml に書く
最初は main.dart にコードを書いて試しながら、
アプリが大きくなってきたら screens/ や widgets/ に整理すると良いみたいです！
Flutterについては以上です。
ここで開発したアプリはAndroidアプリとしてならGoogle Playストア、iOSアプリとしてならApple Storeでリリースすることができます。
次回はGoogle PlayストアとApple Storeそれぞれでリリースする際の手順についてまとめることができたらと思っています。
今回は以上です。
また次回よろしくお願いいたします。