Flutter官方介绍:

android studio flutter连接真机调试 flutter android studio 切换ios_Flutter

 

android studio flutter连接真机调试 flutter android studio 切换ios_Flutter_02

大致意思这么讲:

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。仔细检查输出是否需要安装其他软件或执行其他任务(文章后面有对此处一些打岔的错误进行解决)

android studio flutter连接真机调试 flutter android studio 切换ios_iOS_03

 

第一次运行命令时,它会下载自身的依赖关系并自行编译,后续运行会快很多。如果过程失败,多重复几次,并根据命令行提示进行安装。

接下来会介绍如何执行这些任务并完成设置过程,如果你选择使用某个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

android studio flutter连接真机调试 flutter android studio 切换ios_Flutter_04

 

根据上面的介绍我们选择模拟器运行,如下图所示: 

android studio flutter连接真机调试 flutter android studio 切换ios_Flutter_05

 

结语

Flutter 程序当前页面的组件树,Flutter 程序的核心原则是一切都是组件(Widget),所以他的所有都是组件。 

dart语法分析,我们通过前面的介绍知道,Flutter程序是通过dart语言来写的。

当doctor没有错误的时候,那就是装好了。好了,今天的帖子就写到这里吧,有任何疑问可留言。