I’m an iOS developer myself, so I already have an iOS development environment on my computer, and the most basic thing is to install Xcode.

Check flutter environment

Check that the flutter environment is a Flutter doctor, as shown below. VS Code does not have a flutter doctor installed or not in use

The command line

Create and run the project with the FLUTTER command

1. Folders and filesNaming rules

First of all, explain the naming rules, or there will be unpredictable problems

  1. Do not have Chinese characters in the path;
  2. Project names cannot be named with a hump, they can be underlined_The connection;
  3. All lowercase letters.

Create the Flutter project

Create a flutter_code folder on the desktop and a project named Flutter_demo in the flutter_code folder. When All done! That means the project has been created successfully, and let’s look at the Flutter_demo folder.

$ mkdir flutter_code
$ cd flutter_code
$ flutter create flutter_demo
Copy the code

3. Run the project

1. Go to the 'Flutter_demo' folder, that is, the project root directory 2. Open the iOS Simulator directly using the command 'open-a Simulator', which comes with Xcode. Run the project with the command 'flutter run' to enter the Flutter interactive environment. Before executing the project, ensure that there are no other emulators, no phones connected to computers, and the project will run directly on the iOS emulator. To exit the flutter interaction environment, press 'Q'.Copy the code

  • The command and its effect are shown in the screenshot:

Create Specifies the number of commands to be used

  1. We went to the ios directory, opened the ios project, and found that the project was Swift language, as shown below:

  2. Read the help information about the create command with flutter create –help. Find the -i and -a parameters.

    • -iIndicates the ios project language. The default value isSwift
    • -aRepresents the Android project language, default inflammationkotlin

  3. Specify the language when creating the project

    • IOS is designated as”OCThe android forjava
    $ flutter create -i objc -a java flutter_new
Copy the code

There are many parameters, only the important parameters are introduced, the others can be tried by yourself.

Three: real machine operation

1. Run the real machine in Xcode

Now let’s run the project on a real iPhone, open the iOS project, configure the development certificate in Xcode, and then it will run properly. If the Bundle ID fails to register, change it, add a suffix or something.

2. Run the cli on the terminal to the real computer

  1. Go to the flutter_demo folder

  2. When the flutter run command is executed, three operating environments and device ids can be detected. Later, parameters can be added to specify the device running directly. The terminal gives us four options at the same time to continue executing the command:

    • 1: Indicates the device ID014d4464fd32cbf4c4e5de5354d326364ec93085
    • 2: Is the simulator,
    • 3: it is Chrome
    • q/Q: quit

  3. We enter1Select the real machine to run.

  4. With the device ID directly run on the real device, it is also possible.

    $ flutter run -d 014d4464fd32cbf4c4e5de5354d326364ec93085
Copy the code

Note: Device ID is UDID for iPhone, which is certainly familiar to apple developers. Because I don’t have an Android phone and I don’t understand Android, SO I didn’t test it, so you can try it yourself. The grid on the phone’s screen is caused by reflections.

Four: Change the project path matters needing attention

After our project is created, the path of the project will not be changed under normal circumstances. We are always developing and debugging. So what will happen if we need to change the path of the project? We have two cases, one is to run directly with the command, the other is to run with Xcode.

1. Run terminal commands

Start by running the command on the terminal and drag the Flutter_demo project from flutter_code to the desktop. Then execute flutter run 014 – d d4464fd32cbf4c4e5de5354d326364ec93085 run to the real machine, everything is normal, without any problems

2. Run Xcode

Drag the Flutter_demo project from the desktop to Flutter_code. After Xcode is run (the certificate is configured) on the real machine, the following error is reported, indicating that the folder Flutter_demo is not found on the desktop. At this time, the project is already in the Flutter_code file on the desktop. Obviously, the path is incorrect.

/Users/guofei/Desktop/flutter_demo: No such file or directory

There is a global configuration file in the project, Generated. Xcconfig, as shown in the following figure. This file contains the absolute path of the project, and you can find the path in the error message.

After we correct the three related paths, we run it again and find that it works normally.

3. Summary

After changing the project path:

  1. If Xcode is used to run directly, path errors will occur. You need to modify the relevant path configuration correctly.
  2. The command will update the global configuration file every time.

Note: Only absolute paths can be used here. This path is passed into the Flutter engine as a variable, so relative paths cannot be used. If possible, I’m sure the Flutter team would have used 😄.

Android Studio creates projects

Android Studio has the option to create a Flutter project when it is opened after installing a flutter related plugin.

  1. Select Create New Flutter Project to Create a Flutter Project

  2. Select the Flutter Application

  3. Fill in the project name, SDK path, project save path, and description information. Generally, the SDK path is not needed to be configured. The project save path usually has the default, of course, you can also customize it, which is not very convenient in the home directory. Otherwise, the next button can not be clicked, the same name, irregular name will be red below! Hint.

  4. Enter the Bundle ID, android package name, and select the development language. The default language is OC for iOS and Java for Android. If you need to change the default language, select the corresponding option under Platform Channel Language.

Conclusion:

  1. When creating a project, pay attention to the path naming rules and whether you need to specify a development language.

  2. The terminal running project can specify the device ID directly.

  3. When changing the project path, the path variable of the global generic configuration file is modified at the same time.

  4. Terminal project creation is different from Android Studio’s default language for creating projects.