いろいろ備忘録日記

主に .NET とか Go とか Flutter とか Python絡みのメモを公開しています。

Flutterメモ-16 (Flutter 2.5 から追加された skeleton テンプレートについて)

概要

最近リリースされた Flutter 2.5.0 から flutter create する際に指定できるテンプレートが増えました。

$ flutter --version
Flutter 2.5.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 4cc385b4b8 (7 days ago) • 2021-09-07 23:01:49 -0700
Engine • revision f0826da7ef
Tools • Dart 2.14.0
$ flutter create --help
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.
・
・
割愛
・
・
-t, --template=<type>        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 modular 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.
          [skeleton]         Generate a List View / Detail View Flutter application that follows community best
                             practices.
・
・
割愛
・
・

skeleton というテンプレートが増えています。

コミュニティのベストプラクティスに沿ったList View/Detail のFlutterアプリケーションを生成します。

みたいな記載となっていますね。

今まで使っていたのが、 app というテンプレートになります。

生成してみる

以下のような出力になります。

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

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

  $ cd t1
  $ flutter run

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

まあ、いつものごとくブワァって生成されます。

lib ディレクトリの構造みてみる

んで、肝心の lib ディレクトリ配下は以下のような構成になってました。

$ tree lib
lib
├── main.dart
└── src
    ├── app.dart
    ├── localization
    │   └── app_en.arb
    ├── sample_feature
    │   ├── sample_item.dart
    │   ├── sample_item_details_view.dart
    │   └── sample_item_list_view.dart   
    └── settings
        ├── settings_controller.dart     
        ├── settings_service.dart        
        └── settings_view.dart

4 directories, 9 files

ふむふむ・・libの下にsrcってディレクトリつくるんですね・・・。

localizationディレクトリは、そのまんま多言語対応のためのディレクトリで

sample_featureディレクトリの下が画面に出てくる内容で

settingsディレクトリの下が設定画面用って感じですね。

とりあえず、起動してみましょう。

起動してみる

$ flutter run -d chrome

こんな感じの画面が表示されます。

f:id:gsf_zero1:20210915174616p:plain

DEBUGラベルに隠れて見にくいですが、右上に設定画面のためのアイコンがあります。

f:id:gsf_zero1:20210915174706p:plain

テーマを変更することができます。

f:id:gsf_zero1:20210915174738p:plain

リストビューの項目をタップすると、こんな感じ。

f:id:gsf_zero1:20210915175026p:plain

シンプルな動きになってますね。以前の app テンプレートの場合だと画面遷移とかはなくて単純にカウンターが表示されているだけでしたが、今回の skeleton テンプレートだと画面遷移もするし、変更を全体に通知するような動きしています。勉強に持ってこいですね。

次は、生成された ソースコード を見ていこうと思います。

参考情報

medium.com

medium.com


過去の記事については、以下のページからご参照下さい。

  • いろいろ備忘録日記まとめ

devlights.github.io

サンプルコードは、以下の場所で公開しています。

  • いろいろ備忘録日記サンプルソース置き場

github.com

github.com

github.com