首页新闻动态正文

Flutter教程1【黑马web前端】

更新时间:2019年07月26日 10时52分28秒 来源:黑马程序员论坛

什么是Flutter
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
Flutter使用Dart语言编写,如果您有面向对象语言的经验,就能轻松上手。
Flutter的优势
1. 原生应用程序的性能与平台的集成
Flutter中UI组件和渲染器都从平台中集成到用户的应用程序中,所以原来虚拟的控件树是真实的控件树,所以渲染和绘制的速度会很快,动画发生在用户空间中,开发人员也可以对其进行很多的控制。在页面渲染方面,Flutter比RN各具优势,图片量越大,Flutter的流畅度优势越大;
2. 提供多平台、可移植的UI工具包支持高效应用开发
美观,可定制的UI组件,开发人员完全控制UI组件和布局
3. 高性能、优体验
    1. 响应式视图,不需要JavaScript的桥接器;
    2. 代码将AOT编译为本机(ARM)代码
    3. 强大的开发者工具,惊人的热重新加载
开发环境配置
前提条件
1. Windows 7以上版本(64位)、Mac或Linux操作系统(64位)
2. 磁盘空间:400 MB(不包括Android Studio的磁盘空间)。
3. 已经安装及配置Git。
Mac开发环境
1. Flutter SDK
Dart SDK与Flutter捆绑在一起,没有必要单独安装Dart。在当前终端窗口运行以下命令使用Git安装Flutter.
git clone -b beta https://github.com/flutter/flutter.git
临时设置PATH变量:
export PATH=`pwd`/flutter/bin:$PATH
注意:此代码只能暂时针对当前命令行窗口设置PATH环境变量,所以请不要关闭当前窗口。
运行 flutter doctor 命令查看是否有依赖关系需要安装以完成设置,此命令检查环境并向终端窗口显示报告。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务(如下图所示)
首次运行 flutter 命令时,它会自动下载自己的依赖项并进行编译。
然后终端打开或创建 ~/.bash_profile ,然后添加以下行。
export PATH=$HOME/flutter/bin:$PATH
运行 source $HOME/.bash_profile 刷新当前窗口,然后运行 echo $PATH 命令验证 flutter/bin 目录在PATH中。
2. 安装Xcode
通过网页下载或Mac App Store安装Xcode 7.2或更新版本,通过命令行运行 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer,来配置Xcode命令行工具,以使用新安装的Xcode版本。
3. IOS模拟器
在Mac上设置IOS模拟器,需要通过Spotlight或使用 open -a Simulator 命令找到Simulator。
通过检查模拟器的 Hardware > Device 菜单中的设置,确保模拟器正在使用64位设备(iPhone 5s或更高版本)。
根据开发机器的屏幕尺寸,模拟的高屏幕密度IOS设备可能会溢出屏幕。在模拟器的 Window > Scale 菜单下设置设备刻度。
4. IOS真机
要将Flutter应用程序部署到物理IOS设备,需要一些其他工具和Apple帐户,还需要在Xcode中设置物理设备部署。
首先需要安装homebrew,然后打开终端并运行以下命令来安装用于将Flutter应用程序部署到IOS设备的工具。
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
5. 执行Flutter
在设置好IOS模拟器或者IOS真机之后,执行以下命令,在项目目录下新建并执行一个Flutter项目。
flutter create firstapp
cd firstapp
flutter run
如果成功执行项目,说明我们已经成功在Mac下配置完成。

Windows和Linux配置请自行百度。。。我靠,我配环境配了半晚上,这个万恶的网速。。。

打开模拟器
首先用 flutter emulators 查找当前模拟器,我的模拟器是
apple_ios_simulator • iOS Simulator • Apple
然后连接模拟器
flutter emulators --launch apple_ios_simulator • iOS Simulator • Apple
创建并执行Flutter项目
将终端目录移动至项目文件夹下,我的项目文件夹为桌面的 www 文件夹,cd Desktop/www ,然后输入命令 flutter create firstapp,创建一个叫做firstapp的Flutter项目。

    接着按照命令行提示运行项目
cd firstapp && flutter run


推荐了解热门学科

java培训 Python人工智能 Web前端培训 PHP培训
区块链培训 影视制作培训 C++培训 产品经理培训
UI设计培训 新媒体培训 产品经理培训 Linux运维
大数据培训 智能机器人软件开发




传智播客是一家致力于培养高素质软件开发人才的科技公司“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来,教学研发团队一直致力于打造精品课程资源,不断在产、学、研3个层面创新自己的执教理念与教学方针,并集中“黑马程序员”的优势力量,针对性地出版了计算机系列教材50多册,制作教学视频数+套,发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到,“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员,具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示,“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验,从而多出了更多的项目经验。“为此,传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家,集中研发面向中高级程序员的课程,用以满足企业用人需求,尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程,是在当前主流的初级程序员课程的基础上,增加多领域多行业的含金量项目,从技术的广度和深度上进行拓展“我们希望用5年的时间,打造上百个高含金量的项目,覆盖主流的32个行业。”传智播客课程研发总监于洋表示。




黑马程序员热门视频教程【点击播放】

Python入门教程完整版(懂中文就能学会) 零起点打开Java世界的大门
C++| 匠心之作 从0到1入门学编程 PHP|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript 软件测试入门到精通


在线咨询 我要报名
和我们在线交谈!