[Flutter] How to create a new project and run your first flutter project

Flutter

📝【Flutter】Learning to develop a mind, 【Necessary knowledge for programmers】

📔 Today’s little knowledge——flutterRun the project in action!

1. Create a new project from the terminal command line

existflutterBefore creating a new project, let's run itflutter doctorcommand to check your ownflutterIs there a problem with the environment.

flutter doctor command to check the environment for problems

Judging from the operation of the command, there is no error❌, indicating thatflutterThe environment is OK, then we useflutter create flutterDemoCommand to create a new project project!

new project error

Judging from the error message, there is a problem with our project name.

flutterDemo" is not a valid Dart package name

why ?Big question mark, there is no problem with this name, why is it not supported? Because we're used to camelCase, butDartis not supportedCamelCaseof! Since hump naming is not supported, change the name!

Try changing the name

New project succeeded

The new flutter project is successful

Then follow the prompts,cd first_flutterdemoOpen the project directory,flutter runLet's run the project and see!

2. Run your first flutter project

The first run is a bit slow, the environment will be checked, and then the run will be much faster.

flutter run

  • After the first run is completed, there will be the following prompt: There are some shortcut keys to use when running!

image.png

  • The interface running in the simulator is as follows:

Netease mumu Android emulator

  • flutterThe project file structure is as follows:

image.png

inside the directoryandroidandiOSThere are projects, one code, multiple uses👍🏻!

3. Xcode opens flutter project

becauseflutteris cross-platform, which containsandroidandiOSProject, we double-click to openiOSThe project is ok, the default generated isSwiftengineering.

image.png

OpeniOSThe project looks like this:

image.png

XcoderuniOSThe project looks like this:

image.png

defaultiosYesSwiftengineering,androidYeskotlin, we can also modify the created engineering language by usingflutter create --helpcommand to view

View help

So now go create aOCworks, usingflutter create -i objc flutter_objcdemoOrder.

OC Engineering

hint:

we all useXcodeGo to sign / real machine debugging, will not useXcodeto writeflutter, which also does not supportdartlanguage!

4. Android Studio new project

Android StudioNew Project

image.png

Android Studionewflutterproject

image.png

clickcreateflutterproject, enter the following interface

image.png

Fill in the project name, language of the project, supported platforms, etc.! (I will not create a new one here, I will directly open the previous project!)

Flutter project structure in Android Studio

The directory results are the same as in the folder, and the order is almost the same, we are inlibwrite below the folderdartcode.

You can drop down to select the emulator to run the project

Drop-down selection emulator in Android Studio

Also open the emulator in the terminalopen -a Simulatoer, If there are multiple simulators, you will be prompted to select one to run the project, as shown in the following figure:

If there are multiple emulators you will be prompted to choose one to run the project

Choose one of the emulators to runflutterproject

Select an emulator project to run

5. Write it down

Follow me, more content will continue to be output

🌹 If you like it, give it a like👍🌹

🌹 If you think you have something to gain, you can come to a wave of favorites + follow, so as not to find me next time😁🌹

🌹Welcome everyone to leave a message to exchange, criticize and correct,ForwardPlease indicate the source, thank you for your support! 🌹

Related: [Flutter] How to create a new project and run your first flutter project