前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter 体验记

Flutter 体验记

作者头像
用户8928967
发布2021-08-20 17:01:58
1.1K0
发布2021-08-20 17:01:58
举报
文章被收录于专栏:用户8928967的专栏

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

1. 环境搭建

  • 首先,当然就是 搭建环境,打开 Fuller 中文网,地址是:https://flutterchina.club/,我的是 Mac 系统~

1

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

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

代码语言:javascript
复制
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中

代码语言:javascript
复制
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

这儿添加了:

代码语言:javascript
复制
        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 没有按时完成,再来一次!加油?ヾ(◍°∇°◍)ノ゙


本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-05-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 妮K妮K妮 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 环境搭建
  • 2. 体验 Flutter
  • 3. 运行应用程序
相关产品与服务
命令行工具
腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档