【 Flutter 】Flutter を 基礎 から 学習 ( スタートガイド編 ) part12 プロジェクト作成

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は スタートガイド編 ( part12 )です。

コマンドラインでFlutterのプロジェクトを作成の続きになります。

【 Flutter 】Flutter を 基礎 から 学習 ( スタートガイド編 ) part11 プロジェクト作成方法

プロジェクトの作成方法

コマンド

続・実行

よくわからないのでヘルプを表示してみることにしました。
すると、オプションにandroidxがありません・・・。

PS D:\flutter_projects> flutter create -h
Create a new Flutter project.

If run on a project that already exists, this will repair the project, recreating any files that are missing.

Global options:
-h, --help                  Print this usage information.
-v, --verbose               Noisy logging, including all shell commands executed.
                            If used with "--help", shows hidden options. If used with "flutter doctor", shows additional
                            diagnostic information. (Use "-vv" to force verbose logging in those cases.)
-d, --device-id             Target device id or name (prefixes allowed).
    --version               Reports the version of this tool.
    --suppress-analytics    Suppress analytics reporting when this command runs.

Usage: flutter create 
-h, --help                   Print this usage information.
    --[no-]pub               Whether to run "flutter pub get" after the project has been created.
                             (defaults to on)
    --[no-]offline           When "flutter pub get" is run by the create command, this indicates whether to run it in
                             offline mode or not. In offline mode, it will need to have all dependencies already
                             available in the pub cache to succeed.
    --[no-]overwrite         When performing operations, overwrite existing files.
    --description            The description to use for your new Flutter project. This string ends up in the
                             pubspec.yaml file.
                             (defaults to "A new Flutter project.")
    --org                    The organization responsible for your new Flutter project, in reverse domain name notation.
                             This string is used in Java package names and as prefix in the iOS bundle identifier.
                             (defaults to "com.example")
    --project-name           The project name for this new Flutter project. This must be a valid dart package name.
-i, --ios-language           The language to use for iOS-specific code, either ObjectiveC (legacy) or Swift
                             (recommended).
                             [objc, swift (default)]
-a, --android-language       The language to use for Android-specific code, either Java (legacy) or Kotlin
                             (recommended).
                             [java, kotlin (default)]
    --platforms              The platforms supported by this project. Platform folders (e.g. android/) will be generated
                             in the target project. This argument only works when "--template" is set to app or plugin.
                             When adding platforms to a plugin project, the pubspec.yaml will be updated with the
                             requested platform. Adding desktop platforms requires the corresponding desktop config
                             setting to be enabled.
                             [ios (default), android (default), windows (default), linux (default), macos (default), web
                             (default)]
-t, --template=        Specify the type of project to create.

          [app]              (default) Generate a Flutter application.
          [module]           Generate a project to add a Flutter module to an existing Android or iOS application.
          [package]          Generate a shareable Flutter project containing only Dart code.
          [plugin]           Generate a shareable Flutter project containing an API in Dart code with a
                             platform-specific implementation for Android, for iOS code, or for both.

-s, --sample=            Specifies the Flutter code sample to use as the "main.dart" for an application. Implies
                             "--template=app". The value should be the sample ID of the desired sample from the API
                             documentation website (http://docs.flutter.dev/). An example can be found at:
                             https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
    --list-samples=    Specifies a JSON output file for a listing of Flutter code samples that can be created with
                             "--sample".

Run "flutter help" to see global options.
PS D:\flutter_projects>

推測となりますが以下のいづれかではないかと思います。

  • Flutterの現行(2.2.3)バージョンではandroidxのオプションは廃止された。
  • 自身の環境では使用できない
  • Androidアプリではandroidxが必須になったので自動でandroidxが導入される

ヘルプに記載されていないオプションは使用できませんよね😅

ということで本書のコマンドとは少し異なりますがandroidxオプションなしで実施します。
うまくできましたね!

PS D:\flutter_projects> flutter create `
>> -i swift `
>> -a kotlin `
>> --org com.yourcompany `
>> --description 'A new Flutter application.' `
>> my_app_flutter_command
Creating project my_app_flutter_command...
  my_app_flutter_command\.gitignore (created)
  my_app_flutter_command\.idea\libraries\Dart_SDK.xml (created)
  my_app_flutter_command\.idea\libraries\KotlinJavaRuntime.xml (created)
  my_app_flutter_command\.idea\modules.xml (created)
  my_app_flutter_command\.idea\runConfigurations\main_dart.xml (created)
  my_app_flutter_command\.idea\workspace.xml (created)
  my_app_flutter_command\.metadata (created)
  my_app_flutter_command\android\app\build.gradle (created)
  my_app_flutter_command\android\app\src\main\kotlin\com\yourcompany\my_app_flutter_command\MainActivity.kt (created)
  my_app_flutter_command\android\build.gradle (created)
  my_app_flutter_command\android\my_app_flutter_command_android.iml (created)
  my_app_flutter_command\android\.gitignore (created)
  my_app_flutter_command\android\app\src\debug\AndroidManifest.xml (created)
  my_app_flutter_command\android\app\src\main\AndroidManifest.xml (created)
  my_app_flutter_command\android\app\src\main\res\drawable\launch_background.xml (created)
  my_app_flutter_command\android\app\src\main\res\drawable-v21\launch_background.xml (created)
  my_app_flutter_command\android\app\src\main\res\mipmap-hdpi\ic_launcher.png (created)
  my_app_flutter_command\android\app\src\main\res\mipmap-mdpi\ic_launcher.png (created)
  my_app_flutter_command\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png (created)
  my_app_flutter_command\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png (created)
  my_app_flutter_command\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png (created)
  my_app_flutter_command\android\app\src\main\res\values\styles.xml (created)
  my_app_flutter_command\android\app\src\main\res\values-night\styles.xml (created)
  my_app_flutter_command\android\app\src\profile\AndroidManifest.xml (created)
  my_app_flutter_command\android\gradle\wrapper\gradle-wrapper.properties (created)
  my_app_flutter_command\android\gradle.properties (created)
  my_app_flutter_command\android\settings.gradle (created)
  my_app_flutter_command\ios\Runner\AppDelegate.swift (created)
  my_app_flutter_command\ios\Runner\Runner-Bridging-Header.h (created)
  my_app_flutter_command\ios\Runner.xcodeproj\project.pbxproj (created)
  my_app_flutter_command\ios\Runner.xcodeproj\xcshareddata\xcschemes\Runner.xcscheme (created)
  my_app_flutter_command\ios\.gitignore (created)
  my_app_flutter_command\ios\Flutter\AppFrameworkInfo.plist (created)
  my_app_flutter_command\ios\Flutter\Debug.xcconfig (created)
  my_app_flutter_command\ios\Flutter\Release.xcconfig (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Contents.json (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-1024x1024@1x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@1x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@2x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@3x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@1x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@2x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@3x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@1x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@2x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@3x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@2x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@3x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@1x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@2x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-83.5x83.5@2x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\LaunchImage.imageset\Contents.json (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@2x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@3x.png (created)
  my_app_flutter_command\ios\Runner\Assets.xcassets\LaunchImage.imageset\README.md (created)
  my_app_flutter_command\ios\Runner\Base.lproj\LaunchScreen.storyboard (created)
  my_app_flutter_command\ios\Runner\Base.lproj\Main.storyboard (created)
  my_app_flutter_command\ios\Runner\Info.plist (created)
  my_app_flutter_command\ios\Runner.xcodeproj\project.xcworkspace\contents.xcworkspacedata (created)
  my_app_flutter_command\ios\Runner.xcodeproj\project.xcworkspace\xcshareddata\IDEWorkspaceChecks.plist (created)
  my_app_flutter_command\ios\Runner.xcodeproj\project.xcworkspace\xcshareddata\WorkspaceSettings.xcsettings (created)
  my_app_flutter_command\ios\Runner.xcworkspace\contents.xcworkspacedata (created)
  my_app_flutter_command\ios\Runner.xcworkspace\xcshareddata\IDEWorkspaceChecks.plist (created)
  my_app_flutter_command\ios\Runner.xcworkspace\xcshareddata\WorkspaceSettings.xcsettings (created)
  my_app_flutter_command\lib\main.dart (created)
  my_app_flutter_command\my_app_flutter_command.iml (created)
  my_app_flutter_command\pubspec.yaml (created)
  my_app_flutter_command\README.md (created)
  my_app_flutter_command\test\widget_test.dart (created)
  my_app_flutter_command\web\favicon.png (created)
  my_app_flutter_command\web\icons\Icon-192.png (created)
  my_app_flutter_command\web\icons\Icon-512.png (created)
  my_app_flutter_command\web\index.html (created)
  my_app_flutter_command\web\manifest.json (created)
  my_app_flutter_command\windows\.gitignore (created)
  my_app_flutter_command\windows\CMakeLists.txt (created)
  my_app_flutter_command\windows\flutter\CMakeLists.txt (created)
  my_app_flutter_command\windows\runner\CMakeLists.txt (created)
  my_app_flutter_command\windows\runner\flutter_window.cpp (created)
  my_app_flutter_command\windows\runner\flutter_window.h (created)
  my_app_flutter_command\windows\runner\main.cpp (created)
  my_app_flutter_command\windows\runner\resource.h (created)
  my_app_flutter_command\windows\runner\resources\app_icon.ico (created)
  my_app_flutter_command\windows\runner\runner.exe.manifest (created)
  my_app_flutter_command\windows\runner\Runner.rc (created)
  my_app_flutter_command\windows\runner\run_loop.cpp (created)
  my_app_flutter_command\windows\runner\run_loop.h (created)
  my_app_flutter_command\windows\runner\utils.cpp (created)
  my_app_flutter_command\windows\runner\utils.h (created)
  my_app_flutter_command\windows\runner\win32_window.cpp (created)
  my_app_flutter_command\windows\runner\win32_window.h (created)
Running "flutter pub get" in my_app_flutter_command...           1,473ms
Wrote 95 files.

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

  $ cd my_app_flutter_command
  $ flutter run

Your application code is in my_app_flutter_command\lib\main.dart.

PS D:\flutter_projects>

ファイルはご覧のとおりです。

PS D:\flutter_projects> cd .\my_app_flutter_command\
PS D:\flutter_projects\my_app_flutter_command> ls


    ディレクトリ: D:\flutter_projects\my_app_flutter_command


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2021/08/30     16:20                .dart_tool
d-----        2021/08/30     16:20                .idea
d-----        2021/08/30     16:20                android
d-----        2021/08/30     16:20                ios
d-----        2021/08/30     16:20                lib
d-----        2021/08/30     16:20                test
d-----        2021/08/30     16:20                web
d-----        2021/08/30     16:20                windows
-a----        2021/08/30     16:20            778 .gitignore
-a----        2021/08/30     16:20            315 .metadata
-a----        2021/08/30     16:20           2055 .packages
-a----        2021/08/30     16:20            913 my_app_flutter_command.iml
-a----        2021/08/30     16:20           3440 pubspec.lock
-a----        2021/08/30     16:20           2980 pubspec.yaml
-a----        2021/08/30     16:20            572 README.md


PS D:\flutter_projects\my_app_flutter_command> cd ../
PS D:\flutter_projects>

Android Studio

Android Studioからの作成も確認しておきます。

Flutterのプラグインをインストールしていることが前提となります。

Android Stuidoを起動します。

ティップス

起動すると以前開いたプロジェクトが開いてしまいます。

初回起動で表示された画面から実行したいですね・・・。

調べたところ、初回表示された画面は ウェルカム画面 というらしいです。

プロジェクトを閉じると表示されるとのことでした。

androidstudioのウェルカム画面を表示するにはどうすれば… – Yahoo!知恵袋

初回で見たウェルカム画面とはなんだか違う気がしますが・・・いやあきらかに異なりますね。

スルーしておきましょう。

実行

ウェルカム画面でCreate New Flutter Projectをクリックします。
※本書によると、ウェルカム画面からでなくてもFlutterのプロジェクトは作成できるそうです。

英語が読めないのでなんとも😑

とりあえずFlutter Appを指定してNextをクリックします。

画面の雰囲気的にこの選択で正解みたいですね(笑

Project namemy_app_flutter_androidstudioに変更、Project locationD:\flutter_projects\my_app_flutter_androidstudioしてFinishをクリックします。

Createをクリックします。

あっという間に作成され、Android Studio上で表示されました。

PS D:\flutter_projects> cd .\my_app_flutter_androidstudio\
PS D:\flutter_projects\my_app_flutter_androidstudio> ls


    ディレクトリ: D:\flutter_projects\my_app_flutter_androidstudio


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2021/08/30     17:01                .dart_tool
d-----        2021/08/30     17:01                .idea
d-----        2021/08/30     17:01                android
d-----        2021/08/30     17:01                ios
d-----        2021/08/30     17:01                lib
d-----        2021/08/30     17:01                test
d-----        2021/08/30     17:01                windows
-a----        2021/08/30     17:01            778 .gitignore
-a----        2021/08/30     17:01            315 .metadata
-a----        2021/08/30     17:01           2061 .packages
-a----        2021/08/30     17:02            632 my_app_flutter_androidstudio.iml
-a----        2021/08/30     17:01           3440 pubspec.lock
-a----        2021/08/30     17:01           2982 pubspec.yaml
-a----        2021/08/30     17:01            574 README.md


PS D:\flutter_projects\my_app_flutter_androidstudio>cd ../

 

プロジェクト作成における結論

圧倒的にAndroid Stuidoで作成するほうが楽ですね!

Flutterコマンドでも比較的簡単に作成できるということは覚えておきたいと思います。
しかし、androidxオプションはいったいどこにいったのでしょうか・・・。
本書が発売された時のバージョンにはきっとandroidxオプションはあったのでしょうかね。

Flutterはすごい勢いで進化しているので、本書を読み進めるうえでこういった差異はまた出てくるかもしれませんね。

今日はここまで!