美文网首页
Flutter开发前期准备

Flutter开发前期准备

作者: DasonXie | 来源:发表于2020-08-18 16:43 被阅读0次

具体参考flutter中文网
本文章使用VS Code来编辑

一:下载flutter SDK

1、官网 flutter SDK要翻墙
2、github flutter SDK不需要翻墙

二:更改环境变量

  • 打开bash_profile文件
  • 在bash_profile文件中添加命令

export PUB_HOSTED_URL=https://pub.flutter-io.cn #国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn #国内用户需要设置
export PATH=解压的flutterSDK路径/flutter/bin:$PATH
注意: 如果你使用的是zsh,终端启动时 ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加:source ~/.bash_profile

  • 在终端执行一下命令,然后重新启动mac

source $HOME/.bash_profile

  • 检查依赖是否安装完成

flutter doctor

对于检查的报错,Android和iOS只要有一个是成功的就可以了,另一个报错也没事

三:配置编辑器

  • 下载编辑器VS Code

  • 安装Flutter插件
    1、打开VS Code
    2、View>Command Palette…
    3、输入 ‘install’, 然后选择 Extensions: Install Extension
    4、在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install

  • 创建项目
    1、shift+command+p
    2、输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
    3、输入项目名称,点击确定

  • 运行项目(需要打开iphone模拟器)
    1、等待右下角的弹窗提示结束(有时候会一直无法加载,需要重启电脑)

    加载中 加载完成
    2、有时候加载会没有同步,这是代码会报错,可以试着继续运行项目,会弹出以下提示(有时候会一直无法加载,需要重启电脑)
    3、如果出现了Waiting for another flutter command to release the startup lock...可以到flutter SDK中删除lockfile

四、插件安装

  • Code Runner:右键快捷运行代码
  • Awesome Flutter Snippets:flutter常用函数代码片段
  • Flutter Widget Snippets:Widget代码片段

五、Dart开发

  • 如果用dart语言写一些demo学习语法,需要新建Dart项目。在VS Code中点击new file新建文件,在右下角点击语言,然后在语言选择中选择Dart。但是通过右键运行代码会报错,提示找不到dart。

/bin/sh: dart: command not found

这是因为在环境变量中没有配置dart,在.bash_profile文件中添加命令

export PATH=${PATH}:解压的flutterSDK路径/flutter/bin/cache/dart-sdk/bin

然后在终端执行source $HOME/.bash_profile,再执行dart验证是否配置成功。
然后一定要重启VS Code。

遇到的坑点

1、下载flutter SDK非常久,需要翻墙。
2、环境变量没有配置zshrc文件,导致全局使用flutter命令失败,VS Code无法加载flutter。
3、VS Code无法加载flutter,需要重启电脑才能解决。
4、VS Code提示flutter被lock,需要删除lockfile。

相关文章

  • Flutter开发前期准备

    具体参考flutter中文网本文章使用VS Code来编辑 一:下载flutter SDK 1、官网 flutte...

  • flutter前期准备

    前期工作准备 第一步:java环境安装与配置(配置不做多说明) 下载地址:https://www.oracle.c...

  • Flutter开发环境搭建(Windows环境下)

    前期准备 使用镜像 由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,...

  • Flutter环境搭建

    记录MAC环境下配置Flutter开发环境,并解决编译遇到的异常 前期准备 1、AndroidStudio 3.3...

  • Flutter开发准备

    Flutter开发准备 Flutter 介绍 Flutter 环境搭建 Flutter开发工具 Flutter 介...

  • Flutter入门-前期准备

    概述 混合开发入门,我建议大家参考flutter的官方实例,我们的实例使用的是单引擎+引擎预热模式,请参考官方文档...

  • Flutter 开发准备

    下载安装 Mac 配置 官网下载地址 直接下载慢的话,建议用迅雷下载。 解压下载 文件 flutter_macos...

  • 小程序开发前期准备

    一、创建代码库(git/svn) 二、申请注册企业小程序 1)运维开通注册申请小程序的邮箱(使用没有注册过微信...

  • Android开发之前期准备

    一、安装与环境配置JDK Android开发是基于Java语言的,因此在开发Android应用之前,需要在开发笔记...

  • Android开发 学习Flutter 入门

    Android开发 学习Flutter 入门 一、前言 最近项目准备用Flutter混合开发,写写学习的笔记吧,学...

网友评论

      本文标题:Flutter开发前期准备

      本文链接:https://www.haomeiwen.com/subject/wuwjdktx.html