Flutter教程(一)

Flutter简介

Flutter官网地址
是谷歌的便携式用户界面工具包,可以从一个代码库为移动、网络和桌面构建漂亮的本地应用程序。
特点:开发速度快、富有表现力和灵活性的用户界面、原生性能。

Mac安装方法:
官网安装地址
下载flutter_macos_v1.5.4-hotfix.2-stable.zip,解压命令如下:

1 $ cd ~/development 2 $ unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip 3 4

设置Flutter环境变量

1$ vim ~/.bash_profile 2#Futter 3export PATH=$PATH:/Users/jh/development/flutter/bin 4 5

运行和测试是否安装成功

1$ flutter doctor 2Doctor summary (to see all details, run flutter doctor -v): 3[] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E226, locale zh-Hans-CN) 4 5[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3) 6 ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses 7[!] iOS toolchain - develop for iOS devices (Xcode 10.2.1) 8 ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run: 9 brew update 10 brew install --HEAD usbmuxd 11 brew link usbmuxd 12 brew install --HEAD libimobiledevice 13 brew install ideviceinstaller 14 ✗ ios-deploy not installed. To install: 15 brew install ios-deploy 16 ✗ CocoaPods not installed. 17 CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin 18 usage on the Dart side. 19 Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS. 20 For more info, see https://flutter.dev/platform-plugins 21 To install: 22 brew install cocoapods 23 pod setup 24[!] Android Studio (version 3.2) 25 ✗ Flutter plugin not installed; this adds Flutter specific functionality. 26 ✗ Dart plugin not installed; this adds Dart specific functionality. 27[!] IntelliJ IDEA Ultimate Edition (version 2018.1.2) 28 ✗ Flutter plugin not installed; this adds Flutter specific functionality. 29 ✗ Dart plugin not installed; this adds Dart specific functionality. 30[] VS Code (version 1.27.2) 31[] Connected device (2 available) 32 33! Doctor found issues in 4 categories. 34 35

IOS
配置 Xcode 命令行工具使用新安装的 Xcode 版本,从命令行运行以下命令:

1 $ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 2 3

配置不同版本的xcode,需要切换路径的(这个我也没有使用过多版本,我只用了最新的版本)。
启动模拟器命令如下:

1 $ open -a Simulator 2 3

Android
先安装Android stuido —>Android SDK---->运行的Android 4.1(API Level 16 以上的版本)
一般不使用Android模拟器,使用的都是真机调试。

简单工具调试
我使用的是Visual Studio Code,以后会使用Android Studio/IntelliJ作为开发工具吧,后续会出教程的。
1.安装Visual Studio Code这个不就不讲了。
2.在Visual Studio Code中使用快捷键commond+shift+p,输入install 选择 Extensions:Install Extensions ,查找Flutter直接下载就好。
3.下载完后点击reload或者重新打开vscode, command + shift + p 输入 flutter 选择 Flutter:Run Flutter Doctor 与shell下输入flutter doctor相同,检测flutter是否正常

创建和运行项目
1.命令生成和运行项目如下:

创建项目

1 $ flutter create my_app 2 3

进入项目目录

1$ cd my_app 2 3

运行项目可以先启用IOS模拟器

1 $ open -a Simulator 2 $ flutter run 3 4

设置成功应该是这样的
Android 手机开启开发者调试—>usb调试开启---->如需usb安装/adb安装,既可以真机调试。因为没有ios手机和开发者账号我在这里也就不演示了。

代码交流 2021