Flutter官方介绍:
大致意思这么讲:
Flutter是谷歌的移动应用SDK,用于在创纪录的时间内在iOS和Android上制作高质量的原生界面。Flutter与现有代码一起使用,被世界各地的开发人员和组织使用,并且是免费和开源的。
Flutter的优势
提高开发效率
同一份代码开发iOS和Android
用更少的代码做更多的事情
轻松迭代
在应用程序运行时更改代码并重新加载(通过热重载)
修复崩溃并继续从应用程序停止的地方进行调试
创建美观,高度定制的用户体验
受益于使用Flutter框架提供的丰富的Material Design和Cupertino(iOS风格)的widget
实现定制、美观、品牌驱动的设计,而不受原生控件的限制
Flutter环境搭建
安装Flutter
1. 下载Flutter源码 (官方建议下载beta分支)
git clone -b beta https://github.com/flutter/flutter.git
配置"环境变量"
代码下载之后在终端中打开bash_profile文件 进行配置(这个文件用Mac开发过的应该都会有,如果没有,自己创建bash_profile
终端输入 $ vim ~/.bash_profile
//会进入vim编辑,如下配置即可(进入之后按i进行编辑)
export FLUTTER_HOME=/Users/你刚才到下载路径/flutterexport PATH=$PATH:$FLUTTER_HOME/bin
配置完成之后首先按下ESC,紧接着输入:退到最后一行,最后输入wq! 退出以后输入source ~/.bash_profile保存一下。
Run flutter doctor
运行Flutter doctor
命令检查是否需要安装依赖项,完成安装
flutter doctor
这个命令会检查环境并在窗口显示报告,Dart SDK与Flutter捆绑在一起;没有必要单独安装Dart。仔细检查输出是否需要安装其他软件或执行其他任务(文章后面有对此处一些打岔的错误进行解决)
第一次运行命令时,它会下载自身的依赖关系并自行编译,后续运行会快很多。如果过程失败,多重复几次,并根据命令行提示进行安装。
接下来会介绍如何执行这些任务并完成设置过程,如果你选择使用某个IDE,可用于IntelliJ IDEA, Android Studio, 和 VS Code,你会看到flutter doctor
输出过程。
一旦你安装了任何缺失的依赖关系,再次运行flutter doctor
命令来验证你已经正确设置了所有东西。
踩过的坑
错误一
Missing Xcode dependency: Python module “six”.
如果有其他问题按照提示一步一步做就可以了。不过我遇到一个很坑的东西,就是明明已经安装了Python但是提示说Missing Xcode dependency: Python module "six".按照提示安装sudo easy_install six但是又提示已安装。找了好久最终在GitHub上找到解决办法,就是在终端执行下面的命令:
$ python2.x -m pip install six by
or
$ brew reinstall python@2
$ pip install six
错误二
[!]Androidtoolchain-developforAndroiddevices(AndroidSDK28.0.2) ✗ Androidlicensesnotaccepted. Toresolvethis, run: flutterdoctor--android-licenses
根据提示运行:
flutter doctor --android-licenses
然后根据提示一直y,y到结束为止。
错误三
这是我原来第二个打叉的地方(这块儿是最下载耗时的模块,也许是我网不好的原因,也没有翻墙..)
[!] iOS toolchain - develop for iOS devices
✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
Download at: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
brew install --HEAD libimobiledevice
brew install ideviceinstaller
✗ ios-deploy not installed. To install:
brew install ios-deploy
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
For more info, see https://flutter.io/platform-plugins
To install:
brew install cocoapods
pod setup
设置IOS
1、安装Xcode
1、通过App Store下载安装Xcode 9.0以后的版本。
2、配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
3、确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了。
使用Xcode,您可以在iOS设备或模拟器上运行Flutter应用程序。2、设置IOS 模拟器
如果要在IOS模拟器上测试程序,请按一下步骤:
1、在终端输入命令打开模拟器 open -a Simulator
2、检查模拟器中的设置,确认模拟器是64位版本并且不低于Iphone5s
3、根据您的开发机器的屏幕大小,模拟的高清屏iOS设备可能会使您的屏幕溢出。在模拟器的 Window> Scale 菜单下设置设备比例
4、运行flutter run启动您的应用。3、安装到IOS 设备
要将您的Flutter应用安装到iOS真机设备,您需要一些额外的工具和一个Apple帐户,您还需要在Xcode中进行设置。
1、安装 homebrew (如果已经安装了brew,跳过此步骤)。
2、打开终端并运行这些命令来安装用于将Flutter应用安装到iOS设备的工具brew update brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
如果这些命令中的任何一个失败并出现错误,请运行brew doctor并按照说明解决问题。
错误四
[!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
✗ Missing Xcode dependency: Python module "six".
Install via 'pip install six' or 'sudo easy_install six'.
按照提示输入'pip install six' 或 'sudo easy_install six'。然后再运行doctor,我这里ios没有报错了。
错误五
[✓] Android Studio(version 3.1)✗ Flutter plugin not installed; thisadds Flutter specific functionality.
✗ Dart plugin not installed; thisadds Dart specific functionality.
android studio里还少了两个插件。我们打开andriod studio。
1.点击preferences
2.搜索flutter插件下载
有弹框提示要安装dart,同意。等安装好后重启andriod studio。
Flutter创建
如果我们Android Studio 安装了Flutter插件,那么我们打开Android Studio 的new file会看到如下图所示有,第二行多了一个New Flutter Project
根据上面的介绍我们选择模拟器运行,如下图所示:
结语
Flutter 程序当前页面的组件树,Flutter 程序的核心原则是
一切都是组件(Widget)
,所以他的所有都是组件。dart语法分析,我们通过前面的介绍知道,Flutter程序是通过dart语言来写的。
当doctor没有错误的时候,那就是装好了。好了,今天的帖子就写到这里吧,有任何疑问可留言。