Flutter 体验记

好了好了,再来体验一把 Flutter。

1. 环境搭建

1
  • 一步步走,由于在国内访问 Flutter 有时可能会受到限制,所以按照流程来先配置下用户环境变量,临时镜像不能保证一直可用,参考 Using Flutter in China 获取最新动态

打开访达 -> 用户名 -> .bash_profile,然后添加:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  • 系统要求

    • 操作系统: macOS (64-bit)
    • 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间)
    • 工具: Flutter 依赖下面这些命令行工具(bash, mkdir, rm, git, curl, unzip, which)
  • 获取Flutter SDK

下载页 下载最新的。

下载

然后解压安装包,添加flutter相关工具到path中

export PATH=/Users/yane/Library/Android/flutter/bin:$PATH
配置
  • 运行 flutter doctor
该命令检查您的环境并在终端窗口中显示报告,Dart SDK已经在捆绑在Flutter里了,没有必要单独安装Dart
我的结果

然后仔细查看结果,看看还有什么没有安装不符合要求的。上面都有提示,可能每个人的不一样。

提示叫我跑这个命令,那就跑一下吧,按各种y

然后第二个问题,看下它给我参考的网页。

https://guides.cocoapods.org/using/getting-started.html#installation%20for%20instructions

运行安装 cocoapods:$ sudo gem install cocoapods

运行

安装完毕后,再次运行 flutter doctor 验证一下,搞定。

搞定

2. 体验 Flutter

  • 环境配置完毕,我这里选择 Android Studio 作为编辑器。首先安装两插件:Flutter 插件和 Dart 插件。
Flutter
Dart

这个插件呢,在 Android Studio 内部,真的是很难下载下来,网络问题喽,反正我是一直下载不顺利。还有个法子,那就是查看 Android studio 版本,然后去到 jetbrains 官网搜索 Flutter、Dart,下载 Android Studio 对应版本的插件,解压放置到 Android Studio 的 plugin 目录下,重启 AS。(/Users/yane/Library/Applicaiton Support/Google/AndroidStudio4.1/plugins)

Flutter
  • 创建新应用
File -> New -> New Flutter Project
Flutter Application

注意项目名称取名要求小写。

flutter_app
create finish
main.dart

点击运行报错:

报红了

后来搞了半天都是各种报红错误,总是拉不下来什么,最终最终还是搞定了,各种升级啥的,贴上配置,android 目录下的 build.gradle

build.gradle

这儿添加了:

        maven{ url 'https://maven.aliyun.com/repository/google' }
        maven{ url 'https://maven.aliyun.com/repository/jcenter' }
        maven{ url 'http://maven.aliyun.com/nexus/content/groups/public'}
        maven {
            url 'http://download.flutter.io'
        }

在 flutterSDK 文件目录打开文件 /Users/yane/Library/Android/flutter/packages/flutter_tools/gradle/resolve_dependencies.gradle 添加:

gradle

3. 运行应用程序

好啦,解决啦,然后点击运行,跑起来了。

demo
  • 体验热重载(Flutter 可以通过 热重载(hot reload) 实现快速的开发周期,热重载就是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态)

来改添加一行 Text,显示 “ Hello World”,点击闪电直接运行,手机上就显示出来最新的啦。

hello world
运行效果

附一句:为了不每次在命令框里面输入 source ~/.bash_profile,让.bash_profile 生效,打开 .zshrc 文件,在末尾处添加代码【source ~/.bash_profile】,这样就可以永久让 .bash_profile 生效了。

记录:

GSYGithubAppFlutter:Flutter完整开发实战详解系列,提供在线预览和 pdf 下载,本系列将完整讲述:如何快速从 0 开发一个完整的 Flutter APP,配套高完成度 Flutter 开源项目 GSYGithubAppFlutter ,同时会提供一些Flutter的开发细节技巧,之后深入源码和实战为你全面解析 Flutter


好啦~ 本篇再次入坑啦。曾经的 flag 没有按时完成,再来一次!加油🆙ヾ(◍°∇°◍)ノ゙

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

推荐阅读更多精彩内容