编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

Flutter配置for Mac -- VSCode(flutter配置Universal Link)

wxchong 2024-08-25 16:45:30 开源技术 20 ℃ 0 评论

最近开始了解Flutter,下面介绍在Mac环境下配置开发环境,我是一个iOS开发者,所有以后的系列文章都会以iOS的开发角度去学习Flutter。大家一块学习

官方开发文档地址

官方开发文档地址

Flutter下载包地址

下载包git地址

VSCode下载地址

自行搜索下载VSCode下载

配置Flutter-SDK

1:解压压缩包,以我个人配置为例,放到文档中,并且创建一个文件夹Flutter,且把解压后的文件放入该文件夹中。

2:配置环境路劲

配置环境变量,使用命令行:

 `cd`到上一步的路劲 

执行

vim ~/.bash_profile

保存并退出(啥事不用干)保存之后执行如下命令

export PATH=`pwd`/flutter/bin:$PAT

保存一下,注意如果这个文件不存在,那么就新建一个。保存完毕之后运行命令:

source ~/.bash_profile

这个时候应该能运行flutter命令了,我们运行命令行:

flutter -h

执行完命令后出现如下日志

Manage your Flutter app development.
Common commands:
 flutter create <output directory>
 Create a new Flutter project in the specified directory.
 flutter run [options]
 Run your Flutter application on an attached device or in an emulator.
Usage: flutter <command> [arguments]
Global options:
-h, --help Print this usage information.
-v, --verbose Noisy logging, including all shell commands
 executed.
 If used with --help, shows hidden options.
-d, --device-id Target device id or name (prefixes allowed).
 --version Reports the version of this tool.
 --suppress-analytics Suppress analytics reporting when this command runs.
 --bug-report Captures a bug report file to submit to the Flutter
 team.
 Contains local paths, device identifiers, and log
 snippets.
 --packages Path to your ".packages" file.
 (required, since the current directory does not
 contain a ".packages" file)
Available commands:
 analyze Analyze the project's Dart code.
 attach Attach to a running application.
 bash-completion Output command line shell completion setup scripts.
 build Flutter build commands.
 channel List or switch flutter channels.
 clean Delete the build/ directory.
 config Configure Flutter settings.
 create Create a new Flutter project.
 devices List all connected devices.
 doctor Show information about the installed tooling.
 drive Runs Flutter Driver tests for the current project.
 emulators List, launch and create emulators.
 format Format one or more dart files.
 help Display help information for flutter.
 install Install a Flutter app on an attached device.
 logs Show log output for running Flutter apps.
 make-host-app-editable Moves host apps from generated directories to
 non-generated directories so that they can be edited
 by developers.
 packages Commands for managing Flutter packages.
 precache Populates the Flutter tool's cache of binary
 artifacts.
 run Run your Flutter app on an attached device.
 screenshot Take a screenshot from a connected device.
 stop Stop your Flutter app on an attached device.
 test Run Flutter unit tests for the current project.
 trace Start and stop tracing for a running Flutter app.
 upgrade Upgrade your copy of Flutter.
Run "flutter help <command>" for more information about a command.
Run "flutter help -v" for verbose help output, including less commonly used
options.

检查环境

flutter doctor

出现日志如下

![环境检查如下](https://upload-images.jianshu.io/upload_images/1416781-f1797dbb30e71ace.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel stable, v1.0.0, on Mac OS X 10.13.1 17B1003, locale
 zh-Hans-CN)
[?] Android toolchain - develop for Android devices
 ? Unable to locate Android SDK.
 Install Android Studio from:
 https://developer.android.com/studio/index.html
 On first launch it will assist you in installing the Android SDK
 components.
 (or visit https://flutter.io/setup/#android-setup for detailed
 instructions).
 If Android SDK has been installed to a custom location, set $ANDROID_HOME
 to that location.
 You may also want to add it to your PATH environment variable.
[!] iOS toolchain - develop for iOS devices (Xcode 9.2)
 ? libimobiledevice and ideviceinstaller are not installed. To install with
 Brew, run:
 brew update
 brew install --HEAD usbmuxd
 brew link usbmuxd
 brew install --HEAD libimobiledevice
 brew install ideviceinstaller
 ? ios-deploy not installed. To install with Brew:
 brew install ios-deploy
[!] Android Studio (not installed)
[?] VS Code (version 1.31.1)
[?] Connected device (1 available)
! Doctor found issues in 3 categories.

NOTICE:按照检测结果的说明,如果有[!] ? 标志,表示本行检测不通过,需要做一些设置或者安装一些软件。因为我是iOS开发者,所以只针对iOS开发体系

所有看上面有提示x的所以就执行每一行提示的指令

? libimobiledevice and ideviceinstaller are not installed. To install with
 Brew, run:
 brew update
 brew install --HEAD usbmuxd
 brew link usbmuxd
 brew install --HEAD libimobiledevice
 brew install ideviceinstaller
 ? ios-deploy not installed. To install with Brew:
 brew install ios-deploy

依次执行完成即可

NOTICE不同用户看到信息不用,请酌情处理

到此执行已经配置完成了。

配置VSCode



vscode配置如图

NOTICE:注意如图上得箭头,选择放置Flutter的文件夹选择bin文件夹的路劲即可

创建新的应用

  1. 启动 VS Code
  2. 调用 View>Command Palette…
  3. 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
  4. 输入 Project 名称 (如myapp), 然后按回车键(可能时间较长)
  5. 指定放置项目的位置,然后按蓝色的确定按钮
  6. 等待项目创建继续,并显示main.dart文件

上述命令创建一个Flutter项目,项目名为myapp,其中包含一个使用Material 组件的简单的演示应用程序。

在项目目录中,您的应用程序的代码位于 lib/main.dart.

运行应用程序

  1. 确保在VS Code的右下角选择了目标设备
  2. 按 F5 键或调用Debug>Start Debugging
  3. 等待应用程序启动
  • 欢迎各位一块学习,提高逼格!
  • 也可以添加洲洲哥的微信公众号

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表