俗話有說：“磨刀不誤砍柴功。”
俗話又說：“養兵千日，用兵一時。”
俗話還說：“臺上十分鐘，臺下十年功。”
寫程式碼也是這樣。
利用平時悠閒的時間多做一些積累。
專案緊急需要趕工期的時候，就可以高效開發，
為什麼會有10倍效率程式設計師，
是因為他們平時比別人少玩10倍，多學10倍。
1入門：flutter create xxx
初學者往往都會從這行命令開始。
$flutter create xxx
複製程式碼你將得到這樣的工程：
xxx
├── README.md
├── android
│ ├── app
│ │ ├── build.gradle
│ │ └── src
│ │ ├── debug
│ │ │ └── AndroidManifest.xml
│ │ ├── main
│ │ │ ├── AndroidManifest.xml
│ │ │ ├── java
│ │ │ │ └── io
│ │ │ │ └── flutter
│ │ │ │ └── plugins
│ │ │ │ └── GeneratedPluginRegistrant.java
│ │ │ ├── kotlin
│ │ │ │ └── com
│ │ │ │ └── example
│ │ │ │ └── xxx
│ │ │ │ └── MainActivity.kt
│ │ │ └── res
│ │ │ └── values
│ │ │ └── styles.xml
│ │ └── profile
│ │ └── AndroidManifest.xml
│ ├── build.gradle
│ ├── gradle
│ │ └── wrapper
│ │ ├── gradle-wrapper.jar
│ │ └── gradle-wrapper.properties
│ ├── gradle.properties
│ ├── gradlew
│ ├── gradlew.bat
│ ├── local.properties
│ ├── settings.gradle
│ └── xxx_android.iml
├── ios
│ ├── Flutter
│ └── ...
├── lib
│ └── main.dart
├── pubspec.lock
├── pubspec.yaml
├── test
│ └── widget_test.dart
└── xxx.iml
複製程式碼這樣建立工程簡單快速，能快速的開始學習flutter。
如果你的目標是建立一個正式的專案而不是“Hello world”， 上面的命令就有些不夠用了。
2基礎：一個可釋出的應用至少要修改這些屬性
- 應用Id
- 應用名稱
- 應用圖示
指定應用Id
想要把你的應用釋出到應用商店，你不得不指定你的應用ID，並儘可能保證你的應用ID的唯一性。
預設的Id將會是com.example.xxx，提交一個id為com.example.xxx的應用顯然是容易衝突的。
android的原始檔預設被放在這個目錄。
src
└── com
└── example
└── xxx
└── MainActivity.kt
複製程式碼這顯然不容易記憶。
你當然可以先'flutter create xxx'，
然後再手工修改android和ios工程下面的appId，
然後重新命名你的檔案目錄。
最後修改哪些相關的引用路徑。
但那樣即費時、費力又容易出錯。
明智的方法是通過--org指定你的包名，你指定的org將取代com.example。
方法如下
$ flutter create --org com.caojianfeng abc
複製程式碼得到的工程如下：
abc
├── README.md
├── abc.iml
├── android
│ ├── abc_android.iml
│ ├── app
│ │ ├── build.gradle
│ │ └── src
│ │ ├── ...
│ │ ├── main
│ │ │ ├── ...
│ │ │ ├── kotlin
│ │ │ │ └── com
│ │ │ │ └── caojianfeng
│ │ │ │ └── abc
│ │ │ │ └── MainActivity.kt
│ │ │ └── res
│ │ │ └── ...
│ │ └── profile
│ │ └── AndroidManifest.xml
│ ├── build.gradle
│ ├── gradle
│ │ └── wrapper
│ │ ├── gradle-wrapper.jar
│ │ └── gradle-wrapper.properties
│ ├── gradle.properties
│ ├── gradlew
│ ├── gradlew.bat
│ ├── local.properties
│ └── settings.gradle
├── ios
│ └── ...
├── lib
│ └── main.dart
├── pubspec.lock
├── pubspec.yaml
└── test
└── widget_test.dart
複製程式碼檢視AndroidManifest.xml中的package欄位
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.caojianfeng.abc">
<!--
...
-->
</manifest>
複製程式碼檢視ios/prooject.pbxproj中的PRODUCT_BUNDLE_IDENTIFIER欄位
...
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/Flutter",
);
PRODUCT_BUNDLE_IDENTIFIER = com.caojianfeng.abc;
PRODUCT_NAME = "$(TARGET_NAME)";
...
複製程式碼appId都是我們想要的'com.caojianfeng.abc'。
修改應用顯示名稱
我們往往不希望使用者看到專案名稱而是產品名稱，例如上面的“abc”。
手工修改顯示名稱不算麻煩，直接改兩個字串就OK了
下面的修改可以將使用者看到的'abc'改成"入門例子"
安卓
android/app/src/main/AndroidManifest.xml
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 0bc9e20..cb9d99a 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -7,7 +7,7 @@
FlutterApplication and put your custom class here. -->
<application
android:name="io.flutter.app.FlutterApplication"
- android:label="abc"
+ android:label="入門例子"
android:icon="@mipmap/ic_launcher">
<activity
android:name=".MainActivity"
複製程式碼iOS
ios/Runner/Info.plist
diff --git a/ios/Runner/Info.plist b/ios/Runner/Info.plist
index 4adbd91..4d6f135 100644
--- a/ios/Runner/Info.plist
+++ b/ios/Runner/Info.plist
@@ -11,7 +11,7 @@
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
- <string>abc</string>
+ <string>入門例子</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
複製程式碼| 修改前 | 修改後 |
|---|---|
 |
 |
修改應用圖示
接下來進入專案目錄，執行flutter run。看到專案執行起來的時候發現，圖示還是flutter自帶的。
新建立的工程中應用圖示這這樣幾個檔案中。
abc
├── ...
├── android
│ ├── app
│ │ ├── build.gradle
│ │ └── src
│ │ ├── main
│ │ │ ├── ...
│ │ │ └── res
│ │ │ ├── drawable
│ │ │ │ └── launch_background.xml
│ │ │ ├── mipmap-hdpi
│ │ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-mdpi
│ │ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-xhdpi
│ │ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-xxhdpi
│ │ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-xxxhdpi
│ │ │ │ └── ic_launcher.png
│ │ │ └── values
│ │ │ └── styles.xml
│ │ └── ...
│ └── ...
├── ios
│ ├── ...
│ ├── Runner
│ │ ├── Assets.xcassets
│ │ │ ├── AppIcon.appiconset
│ │ │ │ ├── Contents.json
│ │ │ │ ├── Icon-App-1024x1024@1x.png
│ │ │ │ ├── Icon-App-20x20@1x.png
│ │ │ │ ├── Icon-App-20x20@2x.png
│ │ │ │ ├── Icon-App-20x20@3x.png
│ │ │ │ ├── Icon-App-29x29@1x.png
│ │ │ │ ├── Icon-App-29x29@2x.png
│ │ │ │ ├── Icon-App-29x29@3x.png
│ │ │ │ ├── Icon-App-40x40@1x.png
│ │ │ │ ├── Icon-App-40x40@2x.png
│ │ │ │ ├── Icon-App-40x40@3x.png
│ │ │ │ ├── Icon-App-60x60@2x.png
│ │ │ │ ├── Icon-App-60x60@3x.png
│ │ │ │ ├── Icon-App-76x76@1x.png
│ │ │ │ ├── Icon-App-76x76@2x.png
│ │ │ │ └── Icon-App-83.5x83.5@2x.png
│ │ │ └── LaunchImage.imageset
│ │ │ ├── Contents.json
│ │ │ ├── LaunchImage.png
│ │ │ ├── LaunchImage@2x.png
│ │ │ ├── LaunchImage@3x.png
│ │ └── ...
複製程式碼兄弟不要發愁，
此時你可以用一行命令，更新flutter工程下所有圖示
| 修改前 | 修改後 |
|---|---|
|
 |
3擴充套件：指定專案型別，指定專案模版
建立工程的時候，
專案模版
你可以使用--sample指定專案模版。
預設的模版是一個計數器，如圖：
你也可以在建立的時候改成把它改成其他樣式，例如：
$flutter create --sample widgets.SliverFillRemaining.1 wigsfr1
複製程式碼還有其他的一些例子可供使用：
| id | widgets.Navigator.1 | widgets.SliverFillRemaining.1 | widgets.SliverFillRemaining.2 | widgets.SliverFillRemaining.3 | widgets.SliverFillRemaining.4 | ... |
|---|---|---|---|---|---|---|
| 截圖 |  |
 |
 |
 |
 |
... |
想要知道都有哪些例子可以用可以使用 --list-samples：
flutter create --list-samples list.json
複製程式碼這樣你會得到一個長長的列表
[
{
"sourcePath": "lib/src/widgets/sliver.dart",
"sourceLine": 1680,
"id": "widgets.SliverFillRemaining.4",
"serial": "4",
"package": "flutter",
"library": "widgets",
"element": "SliverFillRemaining",
"file": "widgets.SliverFillRemaining.4.dart",
"description": "In this sample the [SliverFillRemaining]'s child stretches to fill the\noverscroll area when [fillOverscroll] is true. This sample also features a\nbutton that is pinned to the bottom of the sliver, regardless of size or\noverscroll behavior. Try switching [fillOverscroll] to see the difference."
},
{
"sourcePath": "lib/src/material/scaffold.dart",
"sourceLine": 1310,
"id": "material.Scaffold.of.2",
"serial": "2",
"package": "flutter",
"library": "material",
"element": "Scaffold.of",
"file": "material.Scaffold.of.2.dart",
"description": "When the [Scaffold] is actually created in the same `build` function, the\n`context` argument to the `build` function can't be used to find the\n[Scaffold] (since it's \"above\" the widget being returned in the widget\ntree). In such cases, the following technique with a [Builder] can be used\nto provide a new scope with a [BuildContext] that is \"under\" the\n[Scaffold]:"
},
{"..."}
]
複製程式碼如果你覺得description說的是你想要的。你可以將對應ID傳給--sample。
專案型別
也可以使用--template指定專案型別。
預設的專案模型別就是最常用的app。
你還可以建立dart包和原生外掛，
或者將一個Flutter模組新增到現有的Android或iOS應用程式
4自學：玩轉flutter create 很容易
官方幫助
只要我們想學，我們隨時可以很方便的查閱官方幫助文件：
終端中輸入命令
$ flutter create --help
複製程式碼輸出如下（中文當然是我手工翻譯的）：
Create a new Flutter project.
建立一個新的Flutter工程
If run on a project that already exists, this will repair the project, recreating any files that are missing.
如果在已經存在的專案上執行，這將修復專案，重新建立任何丟失的檔案。
Usage: flutter create <output directory>
用法: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)
專案建立後是否執行“flutter pub get”。
(預設執行)
--[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.
當經由建立命令執行“flutter pub get”時，是否在離線模式下執行。在離線模式下，需要pub快取下面已經快取了所有依賴。
--[no-]with-driver-test Also add a flutter_driver dependency and generate a sample 'flutter drive' test.
新增flutter_driver依賴項，並生成一個示例“flutter driver依賴項”測試。
-t, --template=<type> Specify the type of project to create.
指定要建立的專案型別。
[app] (default) Generate a Flutter application.
(預設)生成一個Flutter應用程式。
[module] Generate a project to add a Flutter module to an existing Android or iOS application.
生成一個專案，將一個Flutter模組新增到現有的Android或iOS應用程式。
[package] Generate a shareable Flutter project containing modular Dart code.
生成一個可複用的Dart包。
[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.
生成一個可複用的外掛包，包括Dart程式碼及其對應的原生系統的相關的實現，這裡的原生系統可以是iOS、android、或者兩個都有。
-s, --sample=<id> Specifies the Flutter code sample to use as the main.dart for an application. --template=app. The value should be the sample ID of the desired sample from the API documentation website(http://docs.flutter.dev).
指定一套Flutter示例程式碼作為應用的main.dart。意味著--template=app。該值應該是來自API文件網站(http://docs.flutter.dev)的所需示例的示例ID
An example can be found at https://master-api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
例如：https://master-api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
--list-samples=<path> Specifies a JSON output file for a listing of Flutter code samples that can created with --sample.
想知道帶——sample引數的的建立命令，有哪些可用的程式碼示例？用--list-samples=<path>指定一個JSON輸出檔案，可以列出這些程式碼示例。
--[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.")
新Flutter專案的描述。這個字串將出現在在pubspec.yaml檔案中。
(預設為“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")
負責您的新Flutter專案的組織名，通常是其域名的倒序。該字串用於Java包名，並作為iOS包識別符號中的字首。
(預設“com.example”)
--project-name The project name for this new Flutter project. This must be a valid dart package name.
這個新的Flutter專案的專案名稱。這必須是一個有效的dart包名。
-i, --ios-language [objc, swift (default)]
-a, --android-language [java, kotlin (default)]
--[no-]androidx Generate a project using the AndroidX support libraries
(defaults to on)
使用AndroidX support libraries生成一個專案
(預設使用)
Run "flutter help" to see global options.
複製程式碼