玩轉flutter create命令,作10倍程序員

俗話有說:「磨刀不誤砍柴功。」html

俗話又說:「養兵千日,用兵一時。」java

俗話還說:「臺上十分鐘,臺下十年功。」android

寫代碼也是這樣。ios

利用平時清閒的時間多作一些積累。git

項目緊急須要趕工期的時候,就能夠高效開發,程序員

爲何會有10倍效率程序員,web

是由於他們平時比別人少玩10倍,多學10倍。 json

1入門:flutter create xxx

初學者每每都會從這行命令開始。swift

$flutter create xxx
複製代碼

你將獲得這樣的工程:api

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基礎:一個可發佈的應用至少要修改這些屬性

  1. 應用Id
  2. 應用名稱
  3. 應用圖標

指定應用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指定項目模版。

默認的模版是一個計數器,如圖:

default

你也能夠在建立的時候改爲把它改爲其餘樣式,例如:

$flutter create --sample widgets.SliverFillRemaining.1  wigsfr1
複製代碼

還有其餘的一些例子可供使用:

id widgets.Navigator.1 widgets.SliverFillRemaining.1 widgets.SliverFillRemaining.2 widgets.SliverFillRemaining.3 widgets.SliverFillRemaining.4 ...
截圖
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.

複製代碼
相關文章
相關標籤/搜索