One of the new stacks I plan to learn this year is vue.js, which I will try out when version 3.0 is released. The other one is flutter. Today read the official document, according to the document on the machine to run the environment. Here are the steps to set up the environment, which is also a record of the learning process.

This article is based on flutter. Dev /docs/get-st… To run Flutter Demo on MAC and iPhone. I recorded the key commands and operations, filtered out some explanatory and temporarily irrelevant words, convenient for later review, can also be used as a Chinese document, convenient for beginners to quickly build an environment to eliminate some other interference.

Flutter SDK

Download the latest Flutter SDK for about 1 GB. Once the download is complete, CD to the development folder and unzip.

$CD ~/development $unzip ~/Downloads/ Flutter_MACOS_v1.12.13 +hotfix.5- stablesCopy the code

If you do not want to use a fixed version, you can use git to pull the latest Flutter source code from Github.

 git clone https://github.com/flutter/flutter.git
Copy the code

Then add the FLUTTER action to path.

$ export PATH="$PATH:`pwd`/flutter/bin"
Copy the code

This is only a temporary addition to the current Terminal window, if you want to add it permanently, you can read the official documentation. I don’t want to get off topic here, so I’m not going to expand it, but I’ll do it later.

Run flutter doctor

After these three steps, we can run the command line to see if the Flutter is installed.

$ flutter doctor
Copy the code

There will be a Doctor summary after a while. On my computer, Android Toolchain and Android Studio were previously shown as × because they were not installed. In addition, the Flutter, Xcode, VS Code, and Connected Device are all √, indicating that the Flutter has been configured.

iOS setup

Now we can configure the development environment for ios.

First, install the latest version of Xcode, if not the latest version can be upgraded through the MAC App Store.

Once installed, you need to configure Xcode’s command-line tools. Do the following

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
Copy the code

Finally, you need to make sure you agree to the Xcode certificate. You can either open Xcode for the first time or execute a statement from the command line.

$ sudo xcodebuild -license
Copy the code

Next, let’s configure the iOS emulator.

iOS Simulator

Command line input

$ open -a Simulator
Copy the code

This command opens the latest iOS Device by default. If you want to switch to another iPhone or other Device, go to Hardware > Device and select the one you want.

Create and run a flutter app

Next let’s create an official demo project and get it up and running. Make sure the ios emulation is still running, and then execute the following three commands.

$ flutter create my_app
$ cd my_app
$ flutter run
Copy the code

At this point we can see the official demo running.

Deploy to iOS devices

If we want to run demo on our iOS phones, we can deploy it with Xcode.

First install CocoaPods.

$ sudo gem install cocoapods
$ pod setup
Copy the code

Then CD to the demo folder and execute

$ open ios/Runner.xcworkspace
Copy the code

Once opened, select the Runner project in the left sidebar of Xcode. Next let’s configure the Development Team. On the Runner configuration page, focus first on Signing & Capabilities > Team. If not, you can use your Apple ID to create a Personal Team. It’s free. Once created, we need to modify the Bundle Identifier. This Identifier needs to be unique.

I have a problem here, The app ID “com.example.myapp” cannot be registered to your development team. Change your bundle identifier to a unique string to try again. Details can be found at github.com/flutter/flu… .

My solution is to modify the automatically generated Bundle Identifier. As shown in the example above, modifying Example or MyApp will solve the problem.

Finally, deploy the Demo App using Flutter Run or by clicking the Build and Run button above Xcode.

After deployment, the final step is to add trust Settings > General > Profiles & Device Management on the phone, go to the developer app for your own account, and click Trust.

At this point, we have built the Flutter development environment and can run the Flutter application on our computers and on our own.

I’ll see you next time.