chakokuのブログ(rev4)

テック・コミック・ごくまれにチャリ

Flutter を(適当に)インストールする

Flutter SDKを落とす
Flutter SDK releases | Flutter
(mac OS用 stable 2.10.0)

$ curl  https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_2.10.0-stable.zip  --output  flutter_macos_2.10.0-stable.zip
$ sudo unzip  flutter_macos_2.10.0-stable.zip
$ export PATH=/usr/local/flutter/bin:$PATH
$ which flutter
/usr/local/flutter/bin/flutter

診断ツールを走らせる(rootで走らせて怒られている)

$  sudo flutter doctor
   Woah! You appear to be trying to run flutter as root.
   We strongly recommend running the flutter tool without superuser privileges.
  /
📎
Running "flutter pub get" in flutter_tools...                    2,484ms
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.0, on macOS 11.6.2 20G314 darwin-x64, locale
    ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup
      for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.0)
[✓] Connected device (1 available)
[✓] HTTP Host Availability

! Doctor found issues in 2 categories.

Android SDKとCocoaPodsがないと怒られている(と理解)

 sudo brew install cocoapods

brewをroot権限で走らせると怒られるが、操作対象ディレクトリである/usr/local/var/homebrewはオーナ自分でないので、一般権限でも怒られる。メッセージが出ていて、オーナを変えろとなっている。。うーん、、groupによるpermissionが正しいやり方では?と思うのだが、、メッセージに従って、オーナを自分に変える。
以下のコマンドでオーナ変えたけど、他のディレクトリも軒並みエラーになる。それはそうだ自分は一般権限なので、、

$  sudo chown -R $(whoami) /usr/local/var/homebrew
$ brew install cocoapods

使ってるMacbookは借り物で、自分は初期設定したオーナでないからこんなエラーになっているのではと推測。

admin Groupなら書き込めそうなので、自分をadminに加える

 sudo dscl . -append /Groups/admin GroupMembership  <id_name>

ユーザ一覧、グループ一覧

$ dscl . list /Users
$ dscl . list /Groups

brewでcocoapodsをインストール

  brew install cocoapods
  pod setup

改めてなのだが、、flutterの環境は /usr/local/に置くものではなくて、個人ディレクトリ配下に置くものなのだろうか。flutterのインストール手順を読んでいて、/usr/local ではなくて、個人ディレクトリで使っているような。。

macOS install | Flutter

個人ディレクトリに入れなおして、パスを通して、サンプルを走らせてみる

$ flutter create my_app
$ cd my_app
$ flutter run
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...             23.3s
This app is linked to the debug service: ws://127.0.0.1:49478/vW43dp5kTJs=/ws
Debug service listening on ws://127.0.0.1:49478/vW43dp5kTJs=/ws

💪 Running with sound null safety 💪

🔥  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

An Observatory debugger and profiler on Chrome is available at:
http://127.0.0.1:49478/vW43dp5kTJs=
The Flutter DevTools debugger and profiler on Chrome is available at:
http://127.0.0.1:9100?uri=http://127.0.0.1:49478/vW43dp5kTJs=

android用のSDKはまだ入っていないが、サンプルは動いた。
デモ画面は以下 GoogleChrome上で動作しているようである。

多分このソースは以下。画面はシンプルとは言え、この程度のソースで動いてしまうのだと。。うーん。JavaScriptを普段使ってる人ならすぐに分かるのだろうか。。awaitが書かれているので、非同期なんだろうな。。。という程度しか自分は分からない。

% cat widget_test.dart
// This is a basic Flutter widget test.
//
// To perform an interaction with a widget in your test, use the WidgetTester
// utility that Flutter provides. For example, you can send tap and scroll
// gestures. You can also use WidgetTester to find child widgets in the widget
// tree, read text, and verify that the values of widget properties are correct.

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

import 'package:my_app/main.dart';

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(const MyApp());

    // Verify that our counter starts at 0.
    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);

    // Tap the '+' icon and trigger a frame.
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();

    // Verify that our counter has incremented.
    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

testが通ったので、iOS版アプリをビルドしてみる。
MACのファインダー等で、以下のファイルを選択してXcodeを起動

ios/Runner.xcworkspace 

普段は自分のiPhoneデバッグ対象にしているので、そのままRunさせると
ビルドが走って、iPhone上でtestプログラムが走る。

上記作業でiOS版のバイナリを作る環境はできたと思うのだが、どこでプログラミングするのだろうか。。Xcodeでやるものではないと思うのだが(SwiftはDart/Flutterから変換して作られるので。。 コードを素で書くのは全く問題ないが、GUIレイアウト等のプレビューはどうなるのか。。ビルドしないとプレビューできないのか? 多分違うと思うのだが。)

全く理解度が低いが、新しい言語やフレームワークを触るのは楽しい。どこまで深められるかが課題。ストレスなくFlutter/DartiOSアプリ(+Androidアプリを作れるまで勉強するつもりだけど。。モチベ―ジョンの維持と理解力が課題かと。

次やるべきはFlutterのチュートリアルか。。
Write your first Flutter app, part 1 | Flutter