개요

iOS/Android의 툴계 앱 만들고 싶어져 Flutter 사용해 보려고 생각했습니다만,
지금까지 전혀 접한 적이 없었으므로, 도입으로부터 프로젝트 작성까지의 비망으로서의 정리한 것이 됩니다.

전부 여기 보면서 만들고 있습니다.
htps : // f ぅ라고 r. v / 두 cs / 게s ts r d / in s ta l

원래 위의 공식 설명이 매우 알기 쉽고, 결론 말하면 별로 이 기사 가치 없다…(´・ω・`)

환경

Mac OSX Catalina

Xcode 11

Flutter v1.12.13

IntelliJ IDEA Ultimate Edition (version 2019.1.4)

Android Studio 3.5에서도 가능합니다

VSCode에서도 가능합니다

Vim에서도 할 수있는 것 같습니다

목표

간단한 프로젝트를 만들어 iOS 시뮬레이터에서 움직여 조금 코드를 엉망으로 반영되는지 확인

Flutter SDK 설치

이대로 하면 좋은 느낌.
htps : // f ぅ라고 r. v / do cs / gen ts r d / in s ta l / mag s

또한, 툴로서 bash 를 사용하고 있는 것 같기 때문에, zsh 가 되어 있는 경우는 bash 로 되돌립니다.

Mac에서 zsh에서 bash로 되돌리는 방법 (Catalina)
htps : // 이 m/___이논_/있어 ms/c9아30에78196998f4160c

그 외, Flutter는 이하에 의존하고 있다고 합니다.

bash

curl

git 2.x

mkdir

rm

unzip

which

zip

SDK를 떨어뜨려 해답한 후, ~/.bash_profile

PATH="<flutterのルートディレクトリ>/bin:${PATH}"

그 후, source ~/.bash_profile 하고 변경을 반영해, 실제로 flutter 라고 치고 패스가 다니고 있는 것을 확인.

$ flutter
Manage your Flutter app development.

Common commands:

  flutter create <output directory>
    Create a new Flutter project in the specified directory.

  flutter run [options]
    Run your Flutter application on an attached device or in an emulator.
︙

필요한 것이 있는지 확인

flutter doctor 라는 명령을 치면 필요한 종속 라이브러리가 설치되어 있는지 확인할 수 있습니다.

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.14.5 18F132, locale ja-JP)

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 10.3)
    ✗ Flutter requires a minimum Xcode version of 11.0.0.
      Download the latest version or update via the Mac App Store.
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2019.1.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.43.2)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

상당히 화가났다(´・ω・`)
Xcode인가…Catalina로 바꾸고 싶지 않지만.
뭐 어쨌든 하지 않으면 안되고, 이 기계에 할까.
(또한 XVim 설치 다시 한번…)

그래서 Catalina로 업데이트하고 Xcode도 11로 다시 실행하고 하나씩 해결해 나간다.
쓰여진 일을 할 뿐이니까 간단.

# Android側のissue解決
$ flutter doctor --android-licenses
# iOS側のissue解決
$ sudo xcodebuild -license
# なぜかCatalinaインストール後にCocoaPodsが使えなくなってたから再インストール
$ sudo gem install cocoapods

어쨌든 vim에서 개발할 수 있도록 하고 싶지만, 일단은 IntelliJ에 플러그인을 인스톨.



다시 doctor를 실행.

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.15.4 19E266, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] IntelliJ IDEA Ultimate Edition (version 2019.1.4)
[!] VS Code (version 1.43.2)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

우선 이것으로 좋다.

간단한 프로젝트 작성 및 이동

결론은 이하 (특히 아무것도 걸리지 않았다)

# プロジェクト作成
$ flutter create my_app
# 動かしてみる
$ cd my_app
$ flutter run
No supported devices connected.
# なるほどねぇ。
# とりあえずiOSシミュレーターを起動してみる
$ open -a Simulator
# 再度実行
$ $ flutter run

Launching lib/main.dart on iPhone 5s in debug mode...
Running Xcode build...                                                  

 ├─Assembling Flutter resources...                          10.3s
Apr  4 09:13:05 ****-puro com.apple.CoreSimulator.SimDevice.1B269AD0-DBEB-4ED9-8941-25D8BB115D2F[17945] (com.apple.imfoundation.IMRemoteURLConnectionAgent): Unknown key for integer: _DirtyJetsamMemoryLimit
Apr  4 09:13:06 ****-puro com.apple.CoreSimulator.SimDevice.1B269AD0-DBEB-4ED9-8941-25D8BB115D2F[17945] (com.apple.imfoundation.IMRemoteURLConnectionAgent): Unknown key for integer: _DirtyJetsamMemoryLimit
 └─Compiling, linking and signing...                        54.9s
Xcode build done.                                           73.7s
        PackageType = Developer;
        SimulatorRootPath = "/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS 10.3.simruntime/Contents/Resources/RuntimeRoot";
        SimulatorUserPath = "/Users/****/Library/Developer/CoreSimulator/Devices/1B269AD0-DBEB-4ED9-8941-25D8BB115D2F/data";
    }
        CFBundleIdentifier = "com.example.myApp";
        PackageType = Developer;
        SimulatorRootPath = "/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS 10.3.simruntime/Contents/Resources/RuntimeRoot";
        SimulatorUserPath = "/Users/****/Library/Developer/CoreSimulator/Devices/1B269AD0-DBEB-4ED9-8941-25D8BB115D2F/data";
    })
        arguments =     (
            "--enable-dart-profiling",
            "--enable-checked-mode",
            "--verify-entry-points",
            "--observatory-port=0"
        );
        environment =     {
            TERM = "xterm-256color";
        };
    }
        retryTimeout: 120.000000 (default write com.apple.CoreSimulatorBridge LaunchRetryTimeout <value>)
        bootTimeout: 300.000000 (default write com.apple.CoreSimulatorBridge BootRetryTimeout <value>)
        bootLeeway: 120.000000 (default write com.apple.CoreSimulatorBridge BootLeeway <value>)
        Note: Use 'xcrun simctl spawn booted defaults write <domain> <key> <value>' to modify defaults in the booted Simulator device.
    Simulator booted at: 2020-04-04 00:11:47 +0000
    Current time: 2020-04-04 00:14:04 +0000
    Within boot leeway: NO
        <<CGColorSpace 0x60000002b980> (kCGColorSpaceICCBased; kCGColorSpaceModelRGB; sRGB IEC61966-2.1)>
            width = 320, height = 568, bpc = 8, bpp = 32, row bytes = 1280 
            kCGImageAlphaNoneSkipFirst | kCGImageByteOrder32Little 
            is mask? No, has mask? No, has matte? No, should interpolate? Yes with colorSpace=<CGColorSpace 0x60000002b980> (kCGColorSpaceICCBased; kCGColorSpaceModelRGB; sRGB IEC61966-2.1)
Syncing files to device iPhone 5s...                                    
 7,093ms (!)                                       

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on iPhone 5s is available at: http://127.0.0.1:52406/15rvDpukoRM=/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

움직였다.
머티리얼 디자인 조금 싫지만 다른 쪽으로 바꾸거나 할 수 있을까.

편집하고 HotRestart를 시도합니다.

flutter create my_app 에서 이미 작성되었습니다 my_app/lib/main.dart

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'ふらったーでもぺーじ'),
    );
  }
}

그리고 터미널에서 r 를 누르십시오.

For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

Initializing hot reload...                                              
Reloaded 1 of 478 libraries in 259ms.

이 녀석은 간단하다.

그래서

조금 간단한 앱 만들어 가려고 생각합니다 (`·ω·')