As the saying goes: “sharpening the knife does not mistakenly cut firewood.”

As the saying goes, “Keep troops for a thousand days.”

As the saying goes, “Ten minutes on stage, ten years of work off stage.”

The same goes for writing code.

Use your leisure time to accumulate more.

Projects can be developed efficiently when there is an urgent need to meet deadlines,

Why are there 10 times more productive programmers,

It is because they play 10 times less and study 10 times more than others.

1 Entry: Flutter create XXX

Beginners often start with this command.

$flutter create xxx
Copy the code

You’ll get projects like this:

XXX ├ ─ ─ the README. Md ├ ─ ─ android │ ├ ─ ─ app │ │ ├ ─ ─ build. Gradle │ │ └ ─ ─ the SRC │ │ ├ ─ ─ the debug │ │ │ └ ─ ─ AndroidManifest. XML │ │ ├ ─ ─ the main │ │ │ ├ ─ ─ AndroidManifest. XML │ │ │ ├ ─ ─ Java │ │ │ │ └ ─ ─ IO │ │ │ │ └ ─ ─ flutter │ │ │ │ └ ─ ─ the plugins │ │ │ │ └ ─ ─ GeneratedPluginRegistrant. Java │ │ │ ├ ─ ─ kotlin │ │ │ │ └ ─ ─ com │ │ │ │ └ ─ ─ example │ │ │ │ └ ─ ─ XXX │ │ │ │ └ ─ ─ TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT Build. Gradle │ ├ ─ ─ gradle │ │ └ ─ ─ wrapper │ │ ├ ─ ─ gradle - wrapper. Jar │ │ └ ─ ─ gradle - wrapper. The properties │ ├ ─ ─ Gradle. Properties │ ├ ─ ─ gradlew │ ├ ─ ─ gradlew. Bat │ ├ ─ ─. Local properties │ ├ ─ ─ Settings. Gradle │ └ ─ ─ xxx_android. On iml ├ ─ ─ Ios │ ├─ ├─ ├─ ├ ─ ─ lib │ └ ─ ─. Main dart ├ ─ ─ pubspec. Lock ├ ─ ─ pubspec. Yaml ├ ─ ─test│ ├ ─ ├ ─ sci-imp. ├ ─ sci-impCopy the code

This is a quick and easy way to create a project and start learning about flutter quickly.

If your goal is to create a formal project rather than “Hello World”, the above command is a bit inadequate.

2 Basics: A releasable application must at least modify these properties

  1. Application Id
  2. The application name
  3. Application icon

Specify the application Id

To publish your app to the app store, you have to specify your app ID and make sure that your app ID is as unique as possible.

The default Id will be com.example. XXX, submitting an application with the Id com.example. XXX is obviously conflicted.

Android source files are placed in this directory by default.

The SRC └ ─ ─ com └ ─ ─ example └ ─ ─ XXX └ ─ ─ MainActivity. KtCopy the code

It’s obviously not easy to remember.

You can of course start by ‘flutter create XXX ‘,

And then manually modify the appId under android and ios projects,

Then rename your file directory.

Finally, modify the relevant reference paths.

But that is time-consuming, laborious and error-prone.

The sensible way is to specify your package name with –org. You specify org instead of com.example.

Methods the following

$ flutter create --org com.caojianfeng abc
Copy the code

The resulting project is as follows:

ABC ├ ─ ─ the README. Md ├ ─ ─ the on iml ├ ─ ─ android │ ├ ─ ─ abc_android. On iml │ ├ ─ ─ app │ │ ├ ─ ─ build. Gradle │ │ └ ─ ─ the SRC │ │ ├ ─ ─... │ │ ├─ Main │ ├─... │ │ │ ├ ─ ─ kotlin │ │ │ │ └ ─ ─ com │ │ │ │ └ ─ ─ caojianfeng │ │ │ │ └ ─ ─ ABC │ │ │ │ └ ─ ─ MainActivity. Kt │ │ │ └ ─ ─ res │ │ │ └ ─ ─... │ ├─ ├─ ├─ class.txt, class.txt, class.txt, class.txt, class.txt, class.txt, class.txt, class.txt, class.txt, class.txt │ └ ─ ─ gradle - wrapper. The properties │ ├ ─ ─ gradle. Properties │ ├ ─ ─ gradlew │ ├ ─ ─ gradlew. Bat │ ├ ─ ─. Local properties │ └ ─ ─ ├─ ios │ ├─ └... ├ ─ ─ lib │ └ ─ ─. Main dart ├ ─ ─ pubspec. Lock ├ ─ ─ pubspec. Yaml └ ─ ─test└ ─ ─ widget_test. DartCopy the code

Look at the Package field in androidmanifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.caojianfeng.abc"> <! -... --> </manifest>Copy the code

Check the PRODUCT_BUNDLE_IDENTIFIER field in ios/ proojecti. pbxproj

. LIBRARY_SEARCH_PATHS = ("$(inherited)"."$(PROJECT_DIR)/Flutter",); PRODUCT_BUNDLE_IDENTIFIER = com.caojianfeng.abc; PRODUCT_NAME ="$(TARGET_NAME)"; .Copy the code

Appids are all we want ‘com.caojianfeng.abc’.

Change the application display name

We tend not to want the user to see the project name but the product name, such as “ABC” above.

Manually change the display name is not troublesome, directly change two strings OK

The following changes will change the user’s view of ‘ABC’ to ‘Getting started’

The android

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=" Sample"
         android:icon="@mipmap/ic_launcher">
         <activity
             android:name=".MainActivity"
Copy the code

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 >- 
      
       abc
      
+ 
      
        Getting started 
      
        <key>CFBundlePackageType</key>
        <string>APPL</string>
        <key>CFBundleShortVersionString</key>
Copy the code
Before the change The modified

Modifying the App Icon

Next enter the project directory and run Flutter Run. When I saw the project running, I realized that the ICONS of Flutter still came with flutter.

The newly created project uses ICONS in several such files.

ABC ├ ─ ─... ├ ─ ─ android │ ├ ─ ─ app │ │ ├ ─ ─ build. Gradle │ │ └ ─ ─ the SRC │ │ ├ ─ ─ the 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 │ ├ ─ garbage... │ └ ─ ─... ├─ Ios │ ├─... │ ├ ─ ─ Runner │ │ ├ ─ ─ Assets. Xcassets │ │ │ ├ ─ ─ AppIcon. Appiconset │ │ │ │ ├ ─ ─ Contents. The json │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ ├ ─ ─ [email protected] │ │ │ │ └ ─ ─ [email protected] │ │ │ └ ─ ─ │ │ ├─ ├─ [email protected] │ │ ├─ [email protected] │ ├ ─ garbage...Copy the code

Don’t worry, brother,

You can now update all ICONS under the Flutter project with one command

Before the change The modified

3 Extension: Specify project type, specify project template

When you create a project,

Project template

You can specify the project template using –sample.

The default template is a counter, as shown below:

You can also change it to a different style at creation time, for example:

$flutter create --sample widgets.SliverFillRemaining.1  wigsfr1
Copy the code

There are other examples to use:

id widgets.Navigator.1 widgets.SliverFillRemaining.1 widgets.SliverFillRemaining.2 widgets.SliverFillRemaining.3 widgets.SliverFillRemaining.4 .
screenshots
.

To find out which samples are available you can use –list-samples:

flutter create --list-samples list.json
Copy the code

So you get a long list

[{"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]:"
    },
   {"..."}]Copy the code

If you think description is telling you what you want. You can pass the corresponding ID to –sample.

Project type

You can also specify the project type using –template.

The default project module type is the most commonly used app.

You can also create dart packages and native plug-ins,

Or add a Flutter module to an existing Android or iOS application

4 self-study: It is easy to play with flutter create

The official help

As long as we want to learn, we can easily refer to the official help documents:

Enter a command in the terminal

$ flutter create --help
Copy the code

The output is as follows (translated by hand, of course) :

Create a new Flutter project. If run on a project that already exists, this will repair the project, recreating any files that are missing. If running on an existing project, this will fix the project and recreate any missing files. Usage: -h, flutter create <output directory> --help Print this usage information. --[no-]pub Whether to run "flutter pub get" after the project has been created. Whether to run flutter pub get after the project is created. --[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. Whether the flutter pub get is run in offline mode when run via the create command. In offline mode, the pub cache is required under which all dependencies are already cached. --[no-]with-driver-test Also add a flutter_driver dependency and generate a sample 'flutter drive' test. Add the Flutter_driver dependency and generate a sample "FLUTTER Driver dependency" test. -t, --template=<type> Specify the type of project to create. 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. Build a project to add a Flutter module to an existing Android or iOS application. [package] Generate a shareable Flutter project containing modular Dart code. Generate a reusable Dart package. [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. Generate a reusable plug-in package that includes the Dart code and its associated implementation for the native system, which can be iOS, Android, or both. -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). Specify a set of Flutter sample code as the application's main.dart. That means --template=app. The value should be An example ID An example can be found at from the API documentation site (http://docs.flutter.dev) for the required example For example: 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. Want to know what code examples are available for creating a command with -- sample? You can list these code samples by specifying a JSON output file with --list-samples=<path>. --[no-]overwrite When performing operations, overwrite existing files. When an operation is performed, an existing file is overwritten. --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." This string will appear in the pubspec.yaml file. (Default: "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") The name of the organization responsible for your new Flutter project, usually in reverse order of its domain name. This string is used for the Java package name and as a prefix in the iOS package identifier. (default "com.example") --project-name The project name for this new Flutter project. This must be a valid dart package name. The project name of the new Flutter project. This must be a valid Dart package name. -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) Support Libraries Generate a project (default) Run "flutter help" to see global options.Copy the code