こんにちは、社畜ママです！

先月まで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アプリが最初に実行されるファイルです。
簡単なアプリの例：

main.dart

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 には、パッケージ（ライブラリ）や画像、フォントの設定を書きます。

例：画像を使う場合

pubspec.yaml

flutter:
  assets:
    - assets/images/logo.png

この設定をすると、assets/images/logo.png の画像をアプリで使えるようになります。

③ screens/ フォルダを作って、画面を分ける

大きなアプリを作ると、コードが増えて main.dart だけでは管理が大変になります。
そこで、画面ごとにファイルを分けます！

例えば、lib/screens/home_screen.dart を作る：

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 を呼び出す：

main.dart

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それぞれでリリースする際の手順についてまとめることができたらと思っています。

今回は以上です。
また次回よろしくお願いいたします。