M1 Mac で Flutter のハローワールドをやってみました

Tags:

flutter

Created: 2022-01-03 03:25:33Updated: 2022-01-03 04:04:29

PCのスペック

MacBook Pro 14 2021

OS	チップ
macOS Monterey 12.0.1	Apple M1 Pro

Flutter SDK　をダウンロード

以下のページの「Get the Flutter SDK」にある「flutter_macos_2.8.1-stable.zip」をクリックしてダウンロードします。

macOS install | Flutter

Flutter Mac Download Page

ディレクトリの準備

今回は以下のディレクトリを作りました。

/Users/[ユーザー名]/Development/sdk

解凍したファイルを上記のディレクトリに格納します。

/Users/[ユーザー名]/Development/sdk/flutter

パスを通す

「~/.zshrc」を開きます。
以下のコマンドを追記して保存します。

export PATH="$PATH:/Users/[ユーザー名]/Development/sdk/flutter/bin”

変更を反映します。

source ~/.zshrc

シェルを再起動します。

exec $SHELL -l

パスが通っているか確認します。

which flutter

以下のように出力されたらパスが通ってます。

/Users/[ユーザー名]/Development/sdk/flutter/bin/flutter

Flutter のコマンドが使えるかどうか試してみます。

flutter --version

しばらく待つと以下の内容が出力されました。よくわからないですが、実行結果が出るまでかなり時間がかかりました。初回実行は何か読み込んだりして時間がかかるのかもしれないです。

~ % flutter --version
Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 77d935af4d (13 days ago) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝

試しにプロジェクトを作ってみる

以下を実行します。

flutter create helloworld

~ % flutter create helloworld
Running "flutter pub get" in flutter_tools...                      10.0s
Creating project helloworld...
  helloworld/test/widget_test.dart (created)
  helloworld/pubspec.yaml (created)
  helloworld/README.md (created)
  helloworld/lib/main.dart (created)
  helloworld/ios/Runner.xcworkspace/contents.xcworkspacedata (created)
  helloworld/ios/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  helloworld/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings (created)
  helloworld/ios/Runner/Info.plist (created)
  helloworld/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png (created)
  helloworld/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png (created)
  helloworld/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md (created)
  helloworld/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json (created)
  helloworld/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png (created)
  helloworld/ios/Runner/Base.lproj/LaunchScreen.storyboard (created)
  helloworld/ios/Runner/Base.lproj/Main.storyboard (created)
  helloworld/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata (created)
  helloworld/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  helloworld/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings (created)
  helloworld/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme (created)
  helloworld/ios/Flutter/Debug.xcconfig (created)
  helloworld/ios/Flutter/Release.xcconfig (created)
  helloworld/ios/Flutter/AppFrameworkInfo.plist (created)
  helloworld/ios/.gitignore (created)
  helloworld/helloworld.iml (created)
  helloworld/.gitignore (created)
  helloworld/web/favicon.png (created)
  helloworld/web/index.html (created)
  helloworld/web/manifest.json (created)
  helloworld/web/icons/Icon-maskable-512.png (created)
  helloworld/web/icons/Icon-192.png (created)
  helloworld/web/icons/Icon-maskable-192.png (created)
  helloworld/web/icons/Icon-512.png (created)
  helloworld/.metadata (created)
  helloworld/android/app/src/profile/AndroidManifest.xml (created)
  helloworld/android/app/src/main/res/mipmap-mdpi/ic_launcher.png (created)
  helloworld/android/app/src/main/res/mipmap-hdpi/ic_launcher.png (created)
  helloworld/android/app/src/main/res/drawable/launch_background.xml (created)
  helloworld/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png (created)
  helloworld/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png (created)
  helloworld/android/app/src/main/res/values-night/styles.xml (created)
  helloworld/android/app/src/main/res/values/styles.xml (created)
  helloworld/android/app/src/main/res/drawable-v21/launch_background.xml (created)
  helloworld/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png (created)
  helloworld/android/app/src/main/AndroidManifest.xml (created)
  helloworld/android/app/src/debug/AndroidManifest.xml (created)
  helloworld/android/gradle/wrapper/gradle-wrapper.properties (created)
  helloworld/android/gradle.properties (created)
  helloworld/android/.gitignore (created)
  helloworld/android/settings.gradle (created)
  helloworld/android/app/build.gradle (created)
  helloworld/android/app/src/main/kotlin/com/example/helloworld/MainActivity.kt (created)
  helloworld/android/build.gradle (created)
  helloworld/android/helloworld_android.iml (created)
  helloworld/ios/Runner/Runner-Bridging-Header.h (created)
  helloworld/ios/Runner/AppDelegate.swift (created)
  helloworld/ios/Runner.xcodeproj/project.pbxproj (created)
  helloworld/analysis_options.yaml (created)
  helloworld/.idea/runConfigurations/main_dart.xml (created)
  helloworld/.idea/libraries/Dart_SDK.xml (created)
  helloworld/.idea/libraries/KotlinJavaRuntime.xml (created)
  helloworld/.idea/modules.xml (created)
  helloworld/.idea/workspace.xml (created)
Running "flutter pub get" in helloworld...                       1,871ms
Wrote 81 files.

All done!
In order to run your application, type:

  $ cd helloworld
  $ flutter run

Your application code is in helloworld/lib/main.dart.

プロジェクトのディレクトリ移動します。

cd helloworld

起動します。

flutter run

ブラウザで以下の画面が開けば成功です。

Flutter Hello World

PCのスペック

Flutter SDK をダウンロード

ディレクトリの準備

パスを通す

試しにプロジェクトを作ってみる

Flutter SDK　をダウンロード