Flutter初体验

  • 在我的iPhone 8上,列表滑动还是比较卡的。
  • VS Code好像代码提示不够智能。
  • 嵌套是真的醉了。

开发环境搭建

这里介绍的是Mac平台下的开发环境搭建,使用的IDEVS Code。如果你使用的是WindowsLinux,可以查看Flutter中文网上的介绍。

安装Flutter

git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=`pwd`/flutter/bin:$PATH

上面在命令行中设置的环境变量,只是针对当前的会话。所以我们需要将他们写道系统配置中。

open $HOME/.bash_profile

如果目录下不存在改文件,则手动创建一个。然后将下面的代码粘贴进去:

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

其中PATH_TO_FLUTTER_GIT_DIRECTORY是你cloneflutter的目录,需要你自己替换掉。

运行source $HOME/.bash_profile

注意: 如果你使用的是zsh,终端启动时 ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加:source ~/.bash_profile

iOS设置

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

如果你之前没有用过cocoapods,需要设置一下镜像。命令行中运行:

gem sources -l

查看当前使用的RubyGems源。

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

后面的--remove附带的参数将上一步查看到的源写上,然后再查看一下RubyGems源是否正确,确保如下所示:

$ gem sources -l
*** CURRENT SOURCES ***

https://gems.ruby-china.com/

如果还有其他关于RubyGems的问题,可以到 https://gems.ruby-china.com/ 获得帮助。

配置VS Code

  • 安装VS Code

你可以去官网下载,然后安装。这里是传送门

  • 安装Flutter插件。

打开后,点击左边侧边栏的插件按钮,搜索Flutter插件。

《Flutter初体验》 在这里插入图片描述

第一个就是
Flutter,安装
Flutter同时会安装
Dart插件,等安装完毕后,再
reload一下就可以了。

第一个Flutter工程

打开你的VS CodeView->Command Palette,输入flutter并选择Flutter: New Project,输入一个工程名,就叫hello_flutter吧。

名称只能是小写字母和下划线,是不是很变态啊。

回车后选择一个目录,工程就创建好了。

VS Code下方的输出区域,给我们提供了TERMINAL功能,连接你的手机,在TERMINAL中敲下flutter run,就会看到正在编译了。完成后,就能在手机上看到你的第一个flutter应用了。

这里需要先配置Xcode以及证书相关。

至此,你就可以开启你的flutter之旅了。你可以按照这篇文章来修改你的工程,创建一个列表来体验。

参考文章
  1. Flutter中文网
  2. Flutter不一样的跨平台解决方案

你也可以关注我的公众号,获取更多文章。

《Flutter初体验》 在这里插入图片描述

    原文作者:Bug开发者
    原文地址: https://www.jianshu.com/p/ffec890233e6
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞