概要
最近リリースされた 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
こんな感じの画面が表示されます。
DEBUGラベルに隠れて見にくいですが、右上に設定画面のためのアイコンがあります。
テーマを変更することができます。
リストビューの項目をタップすると、こんな感じ。
シンプルな動きになってますね。以前の app テンプレートの場合だと画面遷移とかはなくて単純にカウンターが表示されているだけでしたが、今回の skeleton テンプレートだと画面遷移もするし、変更を全体に通知するような動きしています。勉強に持ってこいですね。
次は、生成された ソースコード を見ていこうと思います。
参考情報
過去の記事については、以下のページからご参照下さい。
- いろいろ備忘録日記まとめ
サンプルコードは、以下の場所で公開しています。
- いろいろ備忘録日記サンプルソース置き場