跟上时代潮流,一起学习Flutter

文章概述

通过阅读本文,你大致上能够了解到如下内容:

  • 安装Flutter
  • 创建第一个Flutter项目
  • 体验Flutter的代码热部署

Flutter

近期在Google/IO大会上flutter1.5的发布引起了业内很大的讨论,是时候着手感受一下它的开发体验了,总体来说Flutter的安装体验非常棒,几乎没遇到什么困难。我的机器是MacOS 10.14.3

安装

下载flutterSDK flutter_macos_1.5.4 , 下载之后解压改文件到指定目录,我的目录如下:

/Users/riverli/my/flutter

将flutter命令添加到系统环境中,在.bash_profile中添加如下代码:

export PATH="$PATH:/Users/riverli/my/flutter/flutter/bin"

环境检测:

执行 flutter doctor 命令,会在命令行中列出你的环境问题,只需要根据提示安装即可。达到如下效果即表示你的环境没有问题。

~ $ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.3 18D109, locale zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2)
[✓] Android Studio (version 3.3)
[✓] Connected device (1 available)

• No issues found!

我是使用Android Studio写flutter代码的,如果你不想使用Android Studio可以不用安装。Android Studio需要安装flutter插件才能开发代码;需要装两个插件flutter和Dart。安装flutter的过程中需要自动安装Dart。安装过程如下,在Android Studio的偏好设置中安如下图操作:

插件安装1
插件安装2

创建第一个flutter项目

创建项目可以通过命令行创建,也可以通过Android Studio创建,本文先使用命令行创建,后续文章会使用Android Studio创建。执行如下命令:

flutter create my_app

进入创建的项目

cd my_app

运行项目,执行如下命令:

flutter run

你可以会遇到如下提示:

No connected devices.

Run 'flutter emulators' to list and start any available device emulators.

If you expected your device to be detected, please run "flutter doctor" to diagnose
potential issues, or visit https://flutter.dev/setup/ for troubleshooting tips.

意思是说没有找到连接的设备,不知道项目执行到哪里。可以执行flutter emulators 查看模拟器列表。执行一项得到如下信息:

 ~/my/flutter/my_app $ flutter emulators
2 available emulators:

4.7_WXGA_API_28     • 4.7in WXGA    • Generic • 4.7  WXGA API 28
apple_ios_simulator • iOS Simulator • Apple

To run an emulator, run 'flutter emulators --launch <emulator id>'.
To create a new emulator, run 'flutter emulators --create [--name xyz]'.

You can find more information on managing emulators at the links below:
  https://developer.android.com/studio/run/managing-avds
  https://developer.android.com/studio/command-line/avdmanager

我的机器上有两个可用模拟器7_WXGA_API_28apple_ios_simulator 我们启动其中一个,我选择的是iOS模拟器,执行如下命令:

 ~/my/flutter/my_app $ flutter emulators --launch apple_ios_simulator

之后再执行flutter run 即可启动项目。

 ~/my/flutter/my_app $ flutter run

如下图:

image

代码热部署

在我们开发Android或者iOS原生项目的时候,每次修改代码都需要重新启动程序查看修改效果,flutter不需要这么做,在你修改完代码之后,只需要在命令行中安下r键即可部署代码。开发体验十分舒适。你可以尝试修改lib/main.dart文件下的代码,如95行You have pushed the button this many times:', 尝试修改文案,在命令行中按下r 看一看效果,这里就不贴图了。

总结

OK,本文要将的内容已经完结,不知道你看了之后自己的环境是否搭建好了,是否创建了你的第一个flutter项目,是否体验了代码热部署。如果你有任何问题可以关注我的公众号,给我留言,我会第一时间帮你解答。

下面一篇文章我将讲一下使用flutter做一个简单的列表。

image
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容