Flutter windows 环境配置

2024-04-19 1943阅读

Flutter windows 环境配置

从零开始,演示flutter环境配置到启动项目,同时支持 vscode 和 android studio

目录

  • Flutter windows 环境配置
    • 一、环境配置
    • 1. Flutter SDK
    • 2. Android Studio
    • 3. JDK
    • 4. 拓展安装
    • 5. Visual Studio 2022
    • 二、项目创建和启动
    • 1. vscode
    • 2. Android Studio

      一、环境配置

      1. Flutter SDK

      Flutter Windows SDK 下载地址

      (1)将解压后的bin目录放入系统环境变量的Path中

      Tips : 放在系统变量中时,需要管理员CMD才能使用命令,可以选择放在用户变量中

      解压目录\flutter\bin
      解压目录\flutter\bin\cache\dart-sdk\bin
      

      Flutter windows 环境配置

      (2)新建系统变量,配置源

      PUB_HOSTED_URL=https://pub.flutter-io.cn
      FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
      # 清华源(如果官方的临时源速度慢,可以用这个,速度快)
      PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub
      FLUTTER_STORAGE_BASE_URL=https://mirrors.tuna.tsinghua.edu.cn/flutter
      
      Flutter windows 环境配置Flutter windows 环境配置

      (3)检测配置

      # 测试是否配置完成 (管理员CMD)
      flutter --version
      dart --version
      # 可以检测系统缺少什么 chrome可以用edge替代,visual studio 自行安装
      flutter doctor
      

      2. Android Studio

      Android Studio下载地址

      (1)打开软件后会提示Android SDK未安装,取消掉,一直默认next即可。

      (2)正式进入软件界面后,在 Project 界面中点击 More Actions ,选择SDK Manager

      Flutter windows 环境配置

      (3)在弹出的页面中,选择Android SDK Command-line Tools (latest) , 再点击ok即可安装。

      Flutter windows 环境配置

      (4)android-licenses

      # CMD输入命令 一直Y
      flutter doctor --android-licenses
      

      (5)最后可以在Android Studio 中的 More Actions中选择合适的安卓模拟器进行安装,默认会带一个模拟器。

      Flutter windows 环境配置

      3. JDK

      JDK 下载地址

      正常安装,我安装的是21版本,一直next即可

      # 新建环境变量
      JAVA_HOME=安装目录
      CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib;
      
      Flutter windows 环境配置Flutter windows 环境配置
      # 环境变量Path
      %JAVA_HOME%\bin
      

      Flutter windows 环境配置

      4. 拓展安装

      需要安装 dart + flutter

      (1)vscode - 插件市场上安装

      Flutter windows 环境配置Flutter windows 环境配置

      (2)Android Studio - Plugins中安装

      Flutter windows 环境配置

      5. Visual Studio 2022

      选择C++桌面开发后,右侧列表中检查是否勾选了Windows SDK,需要勾选,再点击安装即可。

      Flutter windows 环境配置

      二、项目创建和启动

      1. vscode

      (1)ctrl+shift+p 搜索 Flutter 选择 Flutter:New Project

      Flutter windows 环境配置

      (2)选择Application,点击后需要选择项目目录,并输入名称

      Flutter windows 环境配置

      (3)创建项目完成

      Flutter windows 环境配置

      (4)右下角Select Device可选择启动设备

      Flutter windows 环境配置

      (3)选择启动的平台,下面是Android Studio默认的模拟器

      Flutter windows 环境配置

      (4)启动项目

      首次启动会下载相关包,需要github的网络,如果等了很久可以切换清华源

      # 可能会卡在这里很久,需要注意是否能访问github
      Flutter assets will be downloaded from https://mirrors.tuna.tsinghua.edu.cn/flutter. Make sure you trust this source!
      Launching lib\main.dart on sdk gphone64 x86 64 in debug mode...
      Flutter assets will be downloaded from https://mirrors.tuna.tsinghua.edu.cn/flutter. Make sure you trust this source!
      Running Gradle task 'assembleDebug'...      
      

      启动方式有两种

      ① 控制台输入 flutter run

      Flutter windows 环境配置

      ② 使用vscode的运行与调试,点击运行

      Flutter windows 环境配置

      2. Android Studio

      (1)安装完拓展后会显示新的选项,选择New Flutter Project

      Flutter windows 环境配置

      (2)选择flutter后,这边可以选择项目的初始化设置,不需要的可以取消,取消后不会生成对应目录。

      Flutter windows 环境配置

      (3)先选择模拟器后再启动项目

      Flutter windows 环境配置

      (4)启动后模拟器不会自动弹出,需要点击右下角的 “Running Devices”

      Flutter windows 环境配置

VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]