Ubuntu下,Flutter安装及在VScode中的配置

本文详细介绍了如何在Linux系统中安装Flutter,设置环境变量,解决$flutterdoctor中的问题,以及在VSCode中配置Flutter插件并创建项目。还提到Dart的基本语法学习资源链接。
摘要由CSDN通过智能技术生成

1、安装flutter

在自己指定的目录下,新建文件夹,并将源码git clone到本地

$ mkdir flutter
$ cd flutter
 
$ git clone -b master https://github.com/flutter/flutter.git

2、给flutter添加环境变量

#编辑配置文件
$ vi ~/.bashrc 

#在末尾加入以下内容,保存退出
$ export PATH="$PATH:/home/jlm/flutter/bin"

#使新添的环境变量生效
$ source ~/.bashrc

#运行 flutter doctor,检查系统环境和配置,这里需要翻墙,我没翻墙,所以会存在错误
$ flutter doctor

在这里插入图片描述
执行提示内容如上,使用命令$ sudo apt-get install curl安装curl。
再次执行$ flutter doctor

此时,如果遇到如下图的报错,由官网给出的解决方案,先执行以下两个命令,再执行$ flutter doctor

$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

在这里插入图片描述

执行$ flutter doctor后的运行结果如下:
在这里插入图片描述

注:结果肯可能会有一些issues,但并不一定要解决所有问题才能开始使用Flutter。在大多数情况下,只需要解决与开发所需功能相关的问题即可。比如我不用安卓,那么和安卓相关的提示就不用去管它。如果有需要的,上面会给出一定的解决方案可供参考。以下是我解决后的执行结果。

在这里插入图片描述

3、在VScode中安装插件

所需插件为flutterdart(因为flutter是个框架,用dart语言实现)。
在这里插入图片描述

4、VScode运行flutter

新建一个文件夹,用vscode打开。并在vscode中打开终端。
使用命令$ flutter help,可以打印出flutter命令的相关用法。

4.1 创建项目

使用命令$ flutter create flutter_test创建项目,发现提示如下:

在这里插入图片描述

可见, 新建的文件名与 Flutter 包依赖项发生冲突。这是因为 ‘flutter_test’ 是一个已经存在的包名或库名。这里我们更换一个项目名称。

在这里插入图片描述
此时,我们创建项目成功。

4.2 运行项目

由以下命令,我们可以将新建的项目跑起来。

$ cd flutter_jlm
$ flutter run

此时,它会下载所需的一些SDK,根据你想要的输入进去。

在这里插入图片描述

我输入了2,等待一会,跳出谷歌界面如下。

在这里插入图片描述

从终端中,我们可以得知,我们在代码中如果作了哪些修改,保存后,按下R,会触发热重启时间。也就是,改动的内容会直接在对应界面上体现出来。

在这里插入图片描述

最后附上dart语法规则网址:https://dart.dev/language

  • 15
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在VS Code配置Flutter,可以按照以下步骤进行操作: 1. 安装Flutter SDK:首先,需要在你的计算机上安装Flutter SDK。你可以从Flutter官方网站(https://flutter.dev)下载适用于你操作系统的SDK版本,并将其解压到一个目录下。 2. 配置环境变量:将Flutter SDK的路径添加到系统的环境变量。在Windows上,可以在系统的"高级系统设置"进行配置;在Mac和Linux上,可以编辑.bashrc或.zshrc文件来配置。将Flutter SDK路径添加到PATH变量。 3. 安装Dart插件:在VS Code,打开扩展面板(使用快捷键Ctrl+Shift+X),搜索并安装Dart插件。这个插件提供了Dart语言的支持,是Flutter的依赖。 4. 安装Flutter插件:同样在扩展面板搜索并安装Flutter插件。该插件提供了对Flutter框架的支持,包括创建、运行和调试Flutter应用程序。 5. 创建Flutter项目:在VS Code,选择一个目录作为你的项目根目录,然后打开终端(使用快捷键Ctrl+`)。运行命令`flutter create <project_name>`来创建一个新的Flutter项目。 6. 启动模拟器或连接设备:在运行Flutter应用程序之前,你需要启动一个模拟器或连接一个真实的设备。你可以使用Android Studio AVD Manager来启动Android模拟器,或者使用Xcode来启动iOS模拟器。 7. 运行Flutter应用程序:在VS Code,打开你创建的Flutter项目文件夹。然后,按下F5键或点击VS Code的调试按钮来启动调试会话并运行你的Flutter应用程序。 这些步骤应该能够帮助你在VS Code成功配置和运行Flutter应用程序。如果你遇到任何问题,可以参考Flutter官方文档(https://flutter.dev/docs)或在开发者社区寻求帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值