在 VSCode 上开发 Flutter 的全过程

在 VSCode 上开发 Flutter 的全过程

1. 安装 VSCode

首先,你需要在你的电脑上安装 VSCode。你可以从 VSCode 官网 下载适合你操作系统的版本并进行安装。

2. 安装 Flutter SDK

接下来,你需要安装 Flutter SDK。你可以从 Flutter 官网 下载适合你操作系统的 Flutter SDK。

以下以 macOS 为例,介绍 Flutter SDK 的安装步骤:

1. 下载 Flutter SDK:

   • 进入 Flutter 官网
   • 选择合适的 Flutter 版本进行下载

2. 解压 Flutter SDK:

• 将下载的 Flutter SDK 压缩包解压到你想要安装的目录,例如 /Users/<your_username>/development/flutter

3. 配置环境变量:

   • 打开终端,执行以下命令编辑 .bash_profile 文件:

     nano ~/.bash_profile
     

   • 在文件中添加以下内容:

     export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"
     

     将 [PATH_OF_FLUTTER_GIT_DIRECTORY] 替换为你实际的 Flutter SDK 安装路径。
   • 保存并退出 .bash_profile 文件。
   • 执行以下命令使环境变量生效:

     source ~/.bash_profile
     

4. 验证 Flutter 安装:

   • 在终端执行以下命令,如果看到版本信息输出,则说明 Flutter 安装成功:

     flutter --version
     

3. 安装 Dart 插件

接下来,你需要在 VSCode 中安装 Dart 插件,以支持 Dart 语言的开发。

1. 打开 VSCode,点击左侧菜单栏的"扩展"图标。
2. 在搜索框中输入 “Dart”。
3. 选择 “Dart” 插件,并点击"安装"。
4. 安装完成后,重启 VSCode。

4. 创建 Flutter 项目

现在,你可以开始创建 Flutter 项目了。

1. 在 VSCode 中,点击左上角的"文件" > “新建文件夹”,创建一个新的文件夹作为你的 Flutter 项目目录。
2. 在新创建的文件夹中,点击左侧菜单栏的"扩展"图标,搜索并安装 “Flutter” 插件。
3. 安装完成后,点击左上角的"终端" > “新建终端”,打开一个新的终端窗口。
4. 在终端中,执行以下命令创建一个新的 Flutter 项目:

   flutter create my_app
   

   这将在当前目录下创建一个名为 “my_app” 的 Flutter 项目。

5. 运行 Flutter 项目

最后,你可以运行 Flutter 项目并在模拟器或真机上预览效果。

1. 在 VSCode 中,打开刚刚创建的 “my_app” 项目。
2. 点击左侧菜单栏的"运行"图标,选择 “Flutter: 启动应用程序”。
3. 在弹出的选项中,选择你想要运行的目标设备(模拟器或真机)。
4. VSCode 将自动编译并运行你的 Flutter 应用程序,你可以在选定的设备上预览效果。

6. fvm下载的flutter如何自定义路径

好的,这是个不错的建议。你可以在 .fvm/fvm_config.json 文件中添加版本号,这样可以更方便地管理和区分不同版本的 Flutter SDK。

具体操作步骤如下:

1. 在 .fvm 文件夹中创建 fvm_config.json 文件。

2. 在 fvm_config.json 文件中添加以下内容:

{
  "flutterSdkPath": "<your_custom_path>/flutter_<version>"
}

将 <your_custom_path> 替换为你想要的 Flutter SDK 安装路径,并将 <version> 替换为你要安装的 Flutter 版本号。

例如，如果你想要安装 Flutter 3.3.10 版本,你可以这样配置:

{
  "flutterSdkPath": "/opt/flutter/flutter_3.3.10"
}

这样,当你使用 fvm 命令时,Flutter SDK 就会被安装到 /opt/flutter/flutter_3.3.10 路径下。

这种方式可以让你更方便地管理和切换不同版本的 Flutter SDK,尤其是在多个项目需要使用不同 Flutter 版本的情况下。