Flutterとは？インストール〜開発環境構築までの手順！プロジェクト作成

// developmentディレクトリの作成
$ mkdir ../development
// flutterを../development/.へ移動
$ mv flutter ../development/.

$ vi ~/.zshrc
// viで開いた中に記述
export PATH=~/development/flutter/bin:$PATH

// 保存して閉じる
:wq

// 現在開いているターミナルに反映
$ source ~/.zshrc

$ flutter --version 
Flutter 3.13.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 12fccda598 (3 days ago) • 2023-09-19 13:56:11 -0700
Engine • revision bd986c5ed2
Tools • Dart 3.1.2 • DevTools 2.25.0

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.5, on macOS 13.5.2 22G91 darwin-arm64, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.82.2)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

$ flutter create testapp

$ cd testapp

$ flutter run
// 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
No wireless devices were found.

[1]: macOS (macos)
[2]: Chrome (chrome)
Please choose one (or "q" to quit): 

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

$ open -a Simulator

$ cd /Users/{ユーザー名}/Library/Android/sdk
$ cd emulator 

# 有効なデバイス名のリストを取得
$ ./emulator -list-avds
Galaxy_Nexus_API_34
Pixel_6_Pro_API_35

# エミュレーター起動
$ ./emulator -avd Pixel_6_Pro_API_35

$ flutter devices                         
4 connected devices:

sdk gphone64 arm64 (mobile) • emulator-5554                        •
android-arm64  • Android 14 (API 34) (emulator)
iPhone 16 Pro Max (mobile)  • E22E3D37-4ACB-48F4-A27F-7FEE89A6DDE9 • ios
• com.apple.CoreSimulator.SimRuntime.iOS-18-0 (simulator)
macOS (desktop)             • macos                                •
darwin-arm64   • macOS 14.6.1 23G93 darwin-arm64
Chrome (web)                • chrome                               •
web-javascript • Google Chrome 134.0.6998.89

$ flutter run -d emulator-5554

or

flutter run -d E22E3D37-4ACB-48F4-A27F-7FEE89A6DDE9

Flutter アプリ
├── android               
│   └──  # Android 用のネイティブコードや設定
│
├── ios                   
│   └──  # iOS 用のネイティブコードや設定
│
├── lib                  
│   └──  # Flutter の主要なコードを格納
│
├── test  # 単体テスト用                  
│   ├── widget_test.dart  # サンプルのウィジェットテスト
│
├── web                   
│   └──  # Flutter Web 用の設定
│
├── 他にも macos や linux、windows など   
│
├── pubspec.yaml          # パッケージ管理ファイル（依存関係やアセット管理）
├── pubspec.lock          # 依存関係のバージョン管理
├── README.md             # プロジェクトの説明
├── .gitignore            # Git で管理しないファイルの指定
├── .metadata             # Flutter プロジェクトのメタデータ
├── .packages             # 依存関係リスト（非推奨）
├── .dart_tool            # Dart のツール関連データ
├── .idea                 # IntelliJ / Android Studio の設定フォルダ
└── analysis_options.yaml # Dart のコード解析ルール設定

├── android                      # Android 用のネイティブコードや設定
│   ├── app
│   │   ├── src
│   │   │   ├── main
│   │   │   │   ├── AndroidManifest.xml  # Android アプリのメタデータ
│   │   │   │   ├── kotlin
│   │   │   │   │   └── com/example/my_app
│   │   │   │   │       └── MainActivity.kt  # Flutter のエントリーポイント
│   │   │   │   ├── java (Java を使う場合)
│   │   │   │   └── res          # Android のリソースフォルダ（アイコン、テーマなど）
│   │   ├── build.gradle         # Android 用の Gradle 設定
│   │   ├── proguard-rules.pro   # ProGuard 設定ファイル
│   ├── build.gradle             # Android プロジェクトの Gradle 設定
│   └── gradle.properties        # Gradle の設定ファイル

├── ios                        # iOS 用のネイティブコードや設定
│   ├── Runner
│   │   ├── AppDelegate.swift  # iOS アプリのエントリーポイント
│   │   ├── Info.plist         # iOS アプリのメタデータ
│   │   ├── Assets.xcassets    # 画像やアイコンを管理
│   └── Runner.xcodeproj       # Xcode のプロジェクトファイル

├── web                # Flutter Web 用の設定
│   ├── index.html     # Web アプリのエントリーポイント
│   ├── manifest.json  # Web アプリのメタデータ
│   ├── favicon.png    # Web アプリのアイコン

├── lib                           # Flutter の主要なコードを格納
│   └── main.dart                 # アプリのエントリーポイント

main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // このウィジェットはアプリケーションのルートとなるウィジェットです。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter デモ',
      theme: ThemeData(
        // アプリのテーマを設定
        //
        // 試してみよう: "flutter run" でアプリを実行後、
        // colorScheme の seedColor を Colors.green に変更して
        // ホットリロードすると、アプリのテーマ色が変わる。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter デモ ホームページ'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // ホーム画面のタイトル
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // setState を呼び出すことで、Flutter に状態の変化を通知し、
      // UI の再描画をトリガーする。
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // setState が呼び出されるたびに、このメソッドが再実行される。
    // Flutter はパフォーマンスを最適化しており、変更が必要な部分だけを再描画する。
    return Scaffold(
      appBar: AppBar(
        // 試してみよう: Colors.amber などに変更して、
        // ホットリロードをすると AppBar の色が変わる。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        // Center ウィジェットは子ウィジェットを中央に配置する。
        child: Column(
          // Column ウィジェットは子ウィジェットを縦に並べる。
          // mainAxisAlignment を指定することで、
          // 縦方向の配置を調整できる。
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'ボタンを押した回数:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'インクリメント',
        child: const Icon(Icons.add),
      ), // 末尾のカンマは、コードの自動フォーマットを適用しやすくするため。
    );
  }
}

void main() {
  runApp(const MyApp());
}