🗂

[Flutter] Getting Started with Flutter in M2 Mac

2023/03/10に公開

Flutter

0. Prerequisite

Install Homebrew
Install Google Chrome
Install VS Code

0.1. PC Info

Software:
    System Software Overview:
      System Version: macOS 13.2.1 (22D68)
      Kernel Version: Darwin 22.3.0

Hardware:
    Hardware Overview:
      Model Name: MacBook Pro
      Chip: Apple M2 Pro
      Memory: 32 GB

0.2. Homebrew version

% brew -v
Homebrew 3.6.10
Homebrew/homebrew-core (git revision 87877f1a581; last commit 2022-11-14)
Homebrew/homebrew-cask (git revision cc64c0def0; last commit 2022-11-14)

1. Flutter SDK

1.1. Install Flutter SDK

Install Homebrew

Run the command which is Homebrew official.

% brew install --cask flutter
==> Downloading https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.7.6-stable.zip
######################################################################## 100.0%
==> Installing Cask flutter
==> Downloading https://formulae.brew.sh/api/formula.jws.json
#=#=#
==> Linking Binary 'dart' to '/opt/homebrew/bin/dart'
==> Linking Binary 'flutter' to '/opt/homebrew/bin/flutter'
🍺  flutter was successfully installed!

Confirm installation

If you see the Flutter version in the command below, the installation is complete.

% flutter --version
Flutter 3.7.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 12cb4eb7a0 (5 days ago) • 2023-03-01 10:29:26 -0800
Engine • revision ada363ee93
Tools • Dart 2.19.3 • DevTools 2.20.1

supplementary information: How to uninstall

You can uninstall in the command below.

% brew uninstall flutter

Install Rosetta

In case of Apple Silicon Mac, you have to install rosetta.

% sudo softwareupdate --install-rosetta --agree-to-license
By using the agreetolicense option, you are agreeing that you have run this tool with the license only option and have read and agreed to the terms.
If you do not agree, press CTRL-C and cancel this process immediately.
2023-03-06 16:40:34.742 softwareupdate[50382:3387286] Package Authoring Error: 032-48321: Package reference com.apple.pkg.RosettaUpdateAuto is missing installKBytes attribute
Install of Rosetta 2 finished successfully

1.2. Run flutter doctor

You can confirm the dependency about flutter to run the command below.
I downloaded XCode in advance. So, the result is that XCode is already downloaded.

% flutter doctor
Running "flutter pub get" in flutter_tools...
Resolving dependencies in ../../opt/homebrew/Caskroom/flutter/3.7.6/flutter/packages/flutter_tools... (15.7s)
...
...
Got dependencies in ../../opt/homebrew/Caskroom/flutter/3.7.6/flutter/packages/flutter_tools!
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.6, on macOS 13.2.1 22D68 darwin-arm64, locale en-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] IntelliJ IDEA Community Edition (version 2022.2)
[✓] VS Code (version 1.76.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 2 categories.

2. iOS development environment

2.1. Install XCode

Download from the following url.

Complete the install with the following command.

% sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
Password:
% sudo xcodebuild -runFirstLaunch
...
By typing 'agree' you are agreeing to the terms of the software license agreements. Type 'print' to print them or anything else to cancel, [agree, print, cancel] agree

You can view the license agreements in Xcode's About Box, or at /Applications/Xcode.app/Contents/Resources/en.lproj/License.rtf

Install Started
1%.........20.........40.........60.........80......Install Succeeded

2.2. Install CocoaPods

You have to install to get easy to manage library used development iOS environment.

sudo gem install cocoapods

2.3. Run flutter doctor

Once again, check the dependency by flutter doctor.

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.6, on macOS 13.2.1 22D68 darwin-arm64, locale en-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] IntelliJ IDEA Community Edition (version 2022.2)
[✓] VS Code (version 1.76.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 2 categories.

Surely, we could complete to install XCode.

3. Confirmation of operation in VSCode.

3.1. Install flutter extention

Install the following extention to use flutter in VSCode.

3.2. Develop Hello, world! in flutter

3.2.1. Develop count up App

Develop the count up app with reference to the following article.

You can make the following application when you have finished.

3.2.2. Develop Hello, world!

You can see made app from the following GitHub.

After adding print, you can see "Hello, world!" on console when push + button as trigger.

lib/main.dart

void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
+     print("Hello, world!");
    });
  }

When you push ＋ button, show the following result on console.

Connecting to VM Service at ws://127.0.0.1:65296/z2kFxPfVKaM=/ws
flutter: Hello, world!

3.2.3. Confirmation of operation in Simulater.

Launch iOS simulator in the following command.

% open -a Simulator

You can see the app like the following picture.

Launch the app created in 3.2.2 on the simulater.

% cd flutter_helloworld
% flutter run
Launching lib/main.dart on iPhone 14 Pro Max in debug mode...
Running Xcode build...
 └─Compiling, linking and signing...                      1,675ms
Xcode build done.                                            4.4s
Syncing files to device iPhone 14 Pro Max...                        32ms

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).

💪 Running with sound null safety 💪

An Observatory debugger and profiler on iPhone 14 Pro Max is available at:
http://127.0.0.1:62022/lMsnlFYcuM8=/
The Flutter DevTools debugger and profiler on iPhone 14 Pro Max is available at:
http://127.0.0.1:9101?uri=http://127.0.0.1:62022/lMsnlFYcuM8=/
flutter: Hello, world!
flutter: Hello, world!

Directory structure of the completed App.

% git ls-files | tree --fromfile=. -L 3
.
├── .gitignore
├── .metadata
├── README.md
├── analysis_options.yaml
├── android
│   ├── app
│   │   ├── build.gradle
│   │   └── src
│   ├── build.gradle
│   ├── gradle
│   │   └── wrapper
│   ├── gradle.properties
│   └── settings.gradle
├── ios
│   ├── Flutter
│   │   ├── AppFrameworkInfo.plist
│   │   ├── Debug.xcconfig
│   │   └── Release.xcconfig
│   ├── Runner
│   │   ├── AppDelegate.swift
│   │   ├── Assets.xcassets
│   │   ├── Base.lproj
│   │   ├── Info.plist
│   │   └── Runner-Bridging-Header.h
│   ├── Runner.xcodeproj
│   │   ├── project.pbxproj
│   │   ├── project.xcworkspace
│   │   └── xcshareddata
│   └── Runner.xcworkspace
│       ├── contents.xcworkspacedata
│       └── xcshareddata
├── lib
│   └── main.dart
├── linux
│   ├── CMakeLists.txt
│   ├── flutter
│   │   ├── CMakeLists.txt
│   │   ├── generated_plugin_registrant.cc
│   │   ├── generated_plugin_registrant.h
│   │   └── generated_plugins.cmake
│   ├── main.cc
│   ├── my_application.cc
│   └── my_application.h
├── macos
│   ├── Flutter
│   │   ├── Flutter-Debug.xcconfig
│   │   ├── Flutter-Release.xcconfig
│   │   └── GeneratedPluginRegistrant.swift
│   ├── Runner
│   │   ├── AppDelegate.swift
│   │   ├── Assets.xcassets
│   │   ├── Base.lproj
│   │   ├── Configs
│   │   ├── DebugProfile.entitlements
│   │   ├── Info.plist
│   │   ├── MainFlutterWindow.swift
│   │   └── Release.entitlements
│   ├── Runner.xcodeproj
│   │   ├── project.pbxproj
│   │   ├── project.xcworkspace
│   │   └── xcshareddata
│   └── Runner.xcworkspace
│       ├── contents.xcworkspacedata
│       └── xcshareddata
├── pubspec.lock
├── pubspec.yaml
├── test
│   └── widget_test.dart
├── web
│   ├── favicon.png
│   ├── icons
│   │   ├── Icon-192.png
│   │   ├── Icon-512.png
│   │   ├── Icon-maskable-192.png
│   │   └── Icon-maskable-512.png
│   ├── index.html
│   └── manifest.json
└── windows
    ├── CMakeLists.txt
    ├── flutter
    │   ├── CMakeLists.txt
    │   ├── generated_plugin_registrant.cc
    │   ├── generated_plugin_registrant.h
    │   └── generated_plugins.cmake
    └── runner
        ├── CMakeLists.txt
        ├── Runner.rc
        ├── flutter_window.cpp
        ├── flutter_window.h
        ├── main.cpp
        ├── resource.h
        ├── resources
        ├── runner.exe.manifest
        ├── utils.cpp
        ├── utils.h
        ├── win32_window.cpp
        └── win32_window.h

36 directories, 61 files