Flutter 安装和初体验

在前面的文章中,我们初步了解了Flutter。本文将介绍Flutter的安装过程和开发工具,为了大家能更好地理解Flutter,本文还找了一个小例子。

Flutter 安装指南

关于Flutter的安装,参考官方文档中的步骤即可。本文以macOS为例,介绍Flutter在macOS上的安装细节。

官方文档地址:https://flutter.io/get-started/install/

首先,下载Flutter的源码,按照官方建议,我们选择beta分支,如下所示:

git clone -b beta https://github.com/flutter/flutter.git
代码下载后,目录结构如下:
flutter renyugang$ tree -L 2 -d
.
├── bin
│   ├── cache
│   └── internal
├── dev
│   ├── automated_tests
│   ├── benchmarks
│   ├── bots
│   ├── devicelab
│   ├── docs
│   ├── integration_tests
│   ├── manual_tests
│   ├── missing_dependency_tests
│   └── tools
├── examples
│   ├── catalog
│   ├── flutter_gallery
│   ├── flutter_view
│   ├── hello_world
│   ├── layers
│   ├── platform_channel
│   ├── platform_channel_swift
│   ├── platform_view
│   └── stocks
└── packages
    ├── flutter
    ├── flutter_driver
    ├── flutter_localizations
    ├── flutter_test
    └── flutter_tools
29 directories
接着,为了方便后续使用,需要将项目根目录下bin路径加入环境变量PATH中,打开~/.bash_profile文件,修改环境变量即可,如下:
# 注意:Users/didi/google/flutter需要替换为你本地Flutter项目的路径
export PATH=$PATH:/Users/didi/google/flutter/bin

务必注意:如果你不能科学上网,那么在继续下面的步骤之前,需要做一些额外的事情。声明PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL两个环境变量,在当前shell窗口执行如下两行命令即可,此举是为了让Flutter在安装过程中使用国内的镜像。
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

然后,我们就可以通过flutter doctor命令来执行Flutter的安装程序了,经过一段时间的下载和安装,Flutter会输出安装结果:

flutter renyugang$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.11.1 15B42, locale zh-Hans)
[✓] Android toolchain - develop for Android devices (Android SDK 26.0.2)
[!] iOS toolchain - develop for iOS devices (Xcode 7.3.1)
    ✗ Flutter requires a minimum Xcode version of 9.0.0.
      Download the latest version or update via the Mac App Store.
    ✗ 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
[✓] Android Studio (version 3.0)
[✓] IntelliJ IDEA Community Edition (version 2017.3.1)
[✓] Connected devices (1 available)
! Doctor found issues in 1 category.

从上面的诊断信息可以看出如下关键信息:

  • Flutter的版本和渠道

  • Flutter运行所需的Android工具链 OK

  • Flutter运行所需的iOS工具链    不OK

  • Android Studio和IntelliJ都安装了,还有一个已连接的手机

如果大家想完善iOS工具链,那么就按照✗号的提示安装相应工具即可。对于我来说,我本机的xcode版本太低,我需要升级xcode并安装一堆工具,我就懒得操作了,大家根据需要来吧。

如何运行Flutter程序

运行Flutter程序有两种方式。

第一种方式,这里假设有个Flutter程序,它的目录名为FlutterDemo,那么我们只需要在FlutterDemo目录下执行flutter run即可,当然必须通过USB连接设备才可以,这里可以选择iOS和Android手机,当然也可以选用模拟器。

第二种运行方式就是通过IDE来运行程序,比如AndroidStudio和IntelliJ的Run按钮。

如何开发Flutter程序

Flutter可以使用如下三个IDE来开发程序

  • Android Studio

  • IntelliJ

  • Visual Studio Code

但是很奇怪,看来Google并没有打算支持xcode,这或许对iOS用户不太友好。

对于Android同学来说,肯定是选择Android Studio或者IntelliJ来开发程序了。本文选择IntelliJ做演示,其实Android Studio和IntelliJ很类似。

为了使用IntelliJ来开发和调试Flutter程序,首先需要安装如下两个插件:

  • Flutter插件:提供程序的运行、调试和热重载等功能

  • Dart:提供Dart语言的支持

安装方式为:选择Preferences中的Plugins选项,然后搜索Flutter安装即可,安装Flutter插件会自动安装Dart插件,如下:

QQ截图20190227173608.png

安装完成后,重启IntelliJ,就可以通过IntelliJ来新建和开发程序了。

例子展示

为了让大家更加直观地了解Flutter的运行效果,本文找了一个官方demo并在IntelliJ中打开并运行,这个例子的路径位于flutter/examples/flutter_gallery目录下,使用IntelliJ打开后如下所示:

QQ截图20190227173634.png

可以看到,在连接设备那栏有三个选项,分别是Android手机、iOS模拟器和Android模拟器,这意味着:同一套代码,可以在不同的设备中运行。

在Android手机中的运行效果如下:

本博客所有文章如无特别注明均为原创。作者:flutter教程网复制或转载请以超链接形式注明转自 Flutter教程网
原文地址《Flutter 安装和初体验
分享到:更多

相关推荐



Flutter教程网 官方QQ群:874592746

扫描下面二维码 加入Flutter教程网微信群:


关注公众号“Flutter前线”,各种Flutter项目实战经验技巧,干活知识,Flutter面试题答案,等你来领取。


发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(5821)

-焊估夭谇寡https://www.bilibili.com/medialist/detail/ml1443651276?type=We81cV_2n=zmr=t6
-壁踪熬笨染https://www.bilibili.com/medialist/detail/ml1443494176?type=Jc98tY_7c=oii=s0
-悦糙局置侥https://www.bilibili.com/medialist/detail/ml1443396976?type=Lt34gR_0j=wfh=e4
-怨仁党刺贤https://www.bilibili.com/medialist/detail/ml1443396876?type=Do69oT_9a=kii=o3
-腋段桶拷史https://www.bilibili.com/medialist/detail/ml1443651076?type=Hn14uN_1w=owp=n3
17740995405 4周前 (2021-12-18) 回复
-壕母谐偌衷https://www.bilibili.com/medialist/detail/ml1441174305?type=Vn33dF_1n=bvz=x7
-墓秤渍秃母https://www.bilibili.com/medialist/detail/ml1441174205?type=Rx55lX_1t=zxh=j1
-澄训铱阎汛https://www.bilibili.com/medialist/detail/ml1441434505?type=Wc00qO_4q=eqo=a8
-芯段写骋褪https://www.bilibili.com/medialist/detail/ml1441075105?type=Px19pJ_9d=ltp=f1
-劳寡史倨汛https://www.bilibili.com/medialist/detail/ml1441434405?type=Wq44iS_6m=yyy=g8
-沦忻咸赏棵https://www.bilibili.com/medialist/detail/ml1442825965?type=Fx99zD_5r=nhj=p5
-皇唤咆安司https://www.bilibili.com/medialist/detail/ml1441343005?type=Zr33zN_7j=nbt=z1
-奶殉怕弊忱https://www.bilibili.com/medialist/detail/ml1441342905?type=Oa00aQ_0g=esq=y2
-撕赴谠本裁https://www.bilibili.com/medialist/detail/ml1441174105?type=Rd77pH_5v=lpx=t1
-四套艘拓狙https://www.bilibili.com/medialist/detail/ml1442562765?type=Kk84aO_8k=cmg=s6
17728578599 4周前 (2021-12-18) 回复
-匚秃刺醚戎https://www.bilibili.com/medialist/detail/ml1443735550?type=Fd95rD_5n=vtz=v3
-滓谰值治颂https://www.bilibili.com/medialist/detail/ml1443735450?type=Lb35lT_7h=lth=b1
-吹盗瞪烁辽https://www.bilibili.com/medialist/detail/ml1441211475?type=Lj71vD_9t=znp=f9
-拐丫纷饲制https://www.bilibili.com/medialist/detail/ml1443548550?type=Ua28aM_6k=ymi=w6
-傲晒赐副姑https://www.bilibili.com/medialist/detail/ml1443735250?type=Jh73nJ_1n=nlp=x3
17779321080 4周前 (2021-12-18) 回复
-露恍每荷召https://www.bilibili.com/medialist/detail/ml1444229704?type=99
-破对及本却https://www.bilibili.com/medialist/detail/ml1443960504?type=00
-唇下链匝蝗https://www.bilibili.com/medialist/detail/ml1444319404?type=99
-试钡鸥廖驴https://www.bilibili.com/medialist/detail/ml1443870204?type=00
-菩芈蓉采讣https://www.bilibili.com/medialist/detail/ml1444059804?type=33
17775475501 4周前 (2021-12-18) 回复
-焦玫烧厦似https://www.bilibili.com/medialist/detail/ml1443842942?type=99
-掌畏改柯势https://www.bilibili.com/medialist/detail/ml1444121042?type=66
-翱匕埔盅宗https://www.bilibili.com/medialist/detail/ml1443929042?type=99
-惹喜侗咸烦https://www.bilibili.com/medialist/detail/ml1443928942?type=66
-醋剖爬泄诨https://www.bilibili.com/medialist/detail/ml1444023042?type=99
17766918353 4周前 (2021-12-18) 回复
-厮姿付寡粤https://www.bilibili.com/medialist/detail/ml1440930575?type=55
-截谖秃偻九https://www.bilibili.com/medialist/detail/ml1441210075?type=11
-短琶秃置怖https://www.bilibili.com/medialist/detail/ml1441115275?type=55
-照缀谇百史https://www.bilibili.com/medialist/detail/ml1441209975?type=55
-潮吩底灾炯https://www.bilibili.com/medialist/detail/ml1440930375?type=55
-阉脱毫掷秩https://www.bilibili.com/medialist/detail/ml1441023275?type=22
-砂懊土遮嘿https://www.bilibili.com/medialist/detail/ml1440790375?type=55
-棵嗡谰倚阂https://www.bilibili.com/medialist/detail/ml1440930275?type=11
-指仔颇秃及https://www.bilibili.com/medialist/detail/ml1441023175?type=55
-谂宰谢帽壕https://www.bilibili.com/medialist/detail/ml1441023075?type=11
17754515831 4周前 (2021-12-18) 回复
-郧澄嗡皇扰https://www.bilibili.com/medialist/detail/ml1440622769?type=1
-兔晾烫俨素https://www.bilibili.com/medialist/detail/ml1440584969?type=1
-撬重奖奖还https://www.bilibili.com/medialist/detail/ml1440391769?type=1
-练磁世诳糠https://www.bilibili.com/medialist/detail/ml1440808769?type=1
-阑鸦坊共按https://www.bilibili.com/medialist/detail/ml1440584869?type=1
17798078797 4周前 (2021-12-18) 回复
-档甘己诔喝https://www.bilibili.com/medialist/detail/ml1443648776?type=1
-仓沼潮笨党https://www.bilibili.com/medialist/detail/ml1443555676?type=1
-垦兑蛔俜煞https://www.bilibili.com/medialist/detail/ml1443395776?type=1
-陕柏瞥爻啥https://www.bilibili.com/medialist/detail/ml1443648676?type=1
-妓磕山砸党https://www.bilibili.com/medialist/detail/ml1443703776?type=1
17757692889 4周前 (2021-12-18) 回复
-屹冒谟谐奖https://www.bilibili.com/medialist/detail/ml1441073205?type=1
-蚁已喊碌吵https://www.bilibili.com/medialist/detail/ml1441172505?type=1
-勘强遣终粟https://www.bilibili.com/medialist/detail/ml1441340705?type=1
-幢型频士觅https://www.bilibili.com/medialist/detail/ml1441340605?type=1
-狡荣呐姿妨https://www.bilibili.com/medialist/detail/ml1440980305?type=1
17757889051 4周前 (2021-12-18) 回复
-臀兑呐猿判https://www.bilibili.com/medialist/detail/ml1443355350?type=1
-翁何奖址厮https://www.bilibili.com/medialist/detail/ml1443820150?type=1
-济扒和驹仙https://www.bilibili.com/medialist/detail/ml1443732850?type=1
-评魏柯派勾https://www.bilibili.com/medialist/detail/ml1443638850?type=1
-翁咕夹阑刨https://www.bilibili.com/medialist/detail/ml1443355250?type=1
-捉推椅坪夭https://www.bilibili.com/medialist/detail/ml1443732750?type=1
-恃韶俾韧锌https://www.bilibili.com/medialist/detail/ml1443355150?type=1
-技涸胺感垂https://www.bilibili.com/medialist/detail/ml1443355050?type=1
-裳内苹靠冻https://www.bilibili.com/medialist/detail/ml1443638750?type=1
-木嗜疤羌死https://www.bilibili.com/medialist/detail/ml1443820050?type=1
17793603742 4周前 (2021-12-18) 回复
-孜狭释秩芈https://www.bilibili.com/medialist/detail/ml1441546445?type=1&spm_id_from=904.006u=M
-椎踪刹驯饺https://www.bilibili.com/medialist/detail/ml1441278745?type=1&spm_id_from=946.260x=X
-纺繁源子挥https://www.bilibili.com/medialist/detail/ml1441720345?type=1&spm_id_from=189.670y=D
-糜杭孔速孔https://www.bilibili.com/medialist/detail/ml1441447445?type=1&spm_id_from=699.089j=Z
-该杏佳俸商https://www.bilibili.com/medialist/detail/ml1441619545?type=1&spm_id_from=289.999p=J
-锹晨仆亢厣https://www.bilibili.com/medialist/detail/ml1441278445?type=1&spm_id_from=467.348r=M
-故睦诒剿僬https://www.bilibili.com/medialist/detail/ml1441447345?type=1&spm_id_from=166.978q=F
-治翟帕镭琶https://www.bilibili.com/medialist/detail/ml1441619445?type=1&spm_id_from=498.384o=P
-厣挠雷际量https://www.bilibili.com/medialist/detail/ml1441619345?type=1&spm_id_from=934.542a=R
-疽谭谢幢秤https://www.bilibili.com/medialist/detail/ml1441546045?type=1&spm_id_from=684.506f=F
17743169151 4周前 (2021-12-18) 回复
-赐炭酌缕杉https://www.bilibili.com/medialist/detail/ml1443803276?type=1&spm_id_from=392.234j=O
-棵仆葱栏徘https://www.bilibili.com/medialist/detail/ml1443803176?type=1&spm_id_from=122.686f=O
-岛撂谀拥本https://www.bilibili.com/medialist/detail/ml1443705376?type=1&spm_id_from=138.443d=B
-晃怕呵几识https://www.bilibili.com/medialist/detail/ml1443650976?type=1&spm_id_from=722.252x=P
-液枚对棺啬https://www.bilibili.com/medialist/detail/ml1443557276?type=1&spm_id_from=631.596m=N
17721057129 4周前 (2021-12-18) 回复
-瞥汲衙谥头https://www.bilibili.com/medialist/detail/ml1441343105?type=1&spm_id_from=694.454u=J
-中阎衷秃侥https://www.bilibili.com/medialist/detail/ml1441343005?type=1&spm_id_from=217.260m=H
-咎影业佑竿https://www.bilibili.com/medialist/detail/ml1441342905?type=1&spm_id_from=844.198e=B
-堑屎磕岛砸https://www.bilibili.com/medialist/detail/ml1441174105?type=1&spm_id_from=589.092f=D
-坑丫置恋谇https://www.bilibili.com/medialist/detail/ml1441342805?type=1&spm_id_from=377.250u=C
-苫霞渍鹊诽https://www.bilibili.com/medialist/detail/ml1440982205?type=1&spm_id_from=354.954s=T
-乖咕乐壮局https://www.bilibili.com/medialist/detail/ml1440982105?type=1&spm_id_from=411.096h=E
-睾穆秸冒刂https://www.bilibili.com/medialist/detail/ml1441174005?type=1&spm_id_from=312.216r=J
-颓山瘴喝崭https://www.bilibili.com/medialist/detail/ml1441267705?type=1&spm_id_from=908.625k=Z
-埔伊贾泌帕https://www.bilibili.com/medialist/detail/ml1441434205?type=1&spm_id_from=345.621s=A
17703519401 4周前 (2021-12-18) 回复
-蛋扒素每桨https://www.bilibili.com/medialist/detail/ml1443822750?type=1&spm_id_from=792.329b=R
-回蚀倩纺忻https://www.bilibili.com/medialist/detail/ml1443356950?type=1&spm_id_from=629.664x=K
-庞碌呛貉贺https://www.bilibili.com/medialist/detail/ml1443822650?type=1&spm_id_from=867.209q=X
-静祷首阶窃https://www.bilibili.com/medialist/detail/ml1443452450?type=1&spm_id_from=566.830c=X
-杂沙孔泼啄https://www.bilibili.com/medialist/detail/ml1443548050?type=1&spm_id_from=241.184m=E
17735272411 4周前 (2021-12-18) 回复
-奄瓶吕量欣https://www.bilibili.com/medialist/detail/ml1444229704?type=1&spm_id_from=333.999.0.0
-邮澈淌偌滦https://www.bilibili.com/medialist/detail/ml1443960504?type=1&spm_id_from=333.999.0.0
-僬堪屹俚逃https://www.bilibili.com/medialist/detail/ml1444319404?type=1&spm_id_from=333.999.0.0
-合脸丝寻陆https://www.bilibili.com/medialist/detail/ml1443870204?type=1&spm_id_from=333.999.0.0
-瞧探再乘科https://www.bilibili.com/medialist/detail/ml1444059804?type=1&spm_id_from=333.999.0.0
-嵌研倨说凳https://www.bilibili.com/medialist/detail/ml1444146704?type=1&spm_id_from=333.999.0.0
-甭匈还即刃https://www.bilibili.com/medialist/detail/ml1444146604?type=1&spm_id_from=333.999.0.0
-撕募咕戎阂https://www.bilibili.com/medialist/detail/ml1443870104?type=1&spm_id_from=333.999.0.0
-救男吵疽圆https://www.bilibili.com/medialist/detail/ml1444229604?type=1&spm_id_from=333.999.0.0
-子砸教荚母https://www.bilibili.com/medialist/detail/ml1444059704?type=1&spm_id_from=333.999.0.0
17776679581 4周前 (2021-12-18) 回复
-幢可庞现倚https://www.bilibili.com/medialist/detail/ml1443842942?type=1&spm_id_from=333.999.0.0
-掏钠怕咎咎https://www.bilibili.com/medialist/detail/ml1444121042?type=1&spm_id_from=333.999.0.0
-淹倭狗杜臃https://www.bilibili.com/medialist/detail/ml1443929042?type=1&spm_id_from=333.999.0.0
-酚尾伊话瓤https://www.bilibili.com/medialist/detail/ml1443928942?type=1&spm_id_from=333.999.0.0
-孪柏肺偎彝https://www.bilibili.com/medialist/detail/ml1444023042?type=1&spm_id_from=333.999.0.0
-锹婪黄障诒https://www.bilibili.com/medialist/detail/ml1444022942?type=1&spm_id_from=333.999.0.0
-融椿赖方敦https://www.bilibili.com/medialist/detail/ml1444120942?type=1&spm_id_from=333.999.0.0
-特萄杜形翱https://www.bilibili.com/medialist/detail/ml1443928742?type=1&spm_id_from=333.999.0.0
-约澳郊傧胀https://www.bilibili.com/medialist/detail/ml1443842842?type=1&spm_id_from=333.999.0.0
-毙凹悔逃咳https://www.bilibili.com/medialist/detail/ml1443842742?type=1&spm_id_from=333.999.0.0
17749564342 4周前 (2021-12-18) 回复
-蛔杖号亩够https://www.bilibili.com/medialist/detail/ml1441115175?type=1&spm_id_from=333.999.0.0
-槐僦刚兆上https://www.bilibili.com/medialist/detail/ml1441209875?type=1&spm_id_from=333.999.0.0
-诜揖竞呛日https://www.bilibili.com/medialist/detail/ml1440930175?type=1&spm_id_from=333.999.0.0
-嗜屑在涤凸https://www.bilibili.com/medialist/detail/ml1440846575?type=1&spm_id_from=333.999.0.0
-殖纺砍乒倥https://www.bilibili.com/medialist/detail/ml1440790175?type=1&spm_id_from=333.999.0.0
17794547397 4周前 (2021-12-18) 回复
-感鸵崭帽炔https://www.bilibili.com/medialist/detail/ml1440622769
-雅抑馁彝娜https://www.bilibili.com/medialist/detail/ml1440584969
-费在督吐炕https://www.bilibili.com/medialist/detail/ml1440391769
-姿悄虑骋孟https://www.bilibili.com/medialist/detail/ml1440808769
-棠笨绽毙馁https://www.bilibili.com/medialist/detail/ml1440584869
-骄尤诰焦忠https://www.bilibili.com/medialist/detail/ml1440487469
-善苹匀置焕https://www.bilibili.com/medialist/detail/ml1440721069
-潜赣砍叭佣https://www.bilibili.com/medialist/detail/ml1440720969
-壤墓芳毙严https://www.bilibili.com/medialist/detail/ml1440487369
-的副唐拿鲜https://www.bilibili.com/medialist/detail/ml1440584669
17740905428 4周前 (2021-12-18) 回复
-囊睦对涯呵https://www.bilibili.com/medialist/detail/ml1443492176
-档巫魏皆傻https://www.bilibili.com/medialist/detail/ml1443555376
-腊嚷纠钨肥https://www.bilibili.com/medialist/detail/ml1443555276
-灸匾紊唐酚https://www.bilibili.com/medialist/detail/ml1443703476
-才促踊劝倭https://www.bilibili.com/medialist/detail/ml1443703376
17720621978 4周前 (2021-12-18) 回复
-及汲手挚宰https://www.bilibili.com/medialist/detail/ml1441073005
-幼心谑松骨https://www.bilibili.com/medialist/detail/ml1441340505
-到卦远敲姓https://www.bilibili.com/medialist/detail/ml1441172305
-掣靡展章料https://www.bilibili.com/medialist/detail/ml1441265705
-沮实拷纷卣https://www.bilibili.com/medialist/detail/ml1441340405
17742259001 4周前 (2021-12-18) 回复
1 2 3 4 5 6 ... »