如何在Android Studio中配置Flutter环境?

简介: 如何在Android Studio中配置Flutter环境?

在 Android Studio 中配置 Flutter 环境,你可以按照以下步骤操作:

1. 安装 Flutter SDK

  • 访问 Flutter 官方下载页面,根据你的操作系统下载对应的 Flutter SDK 压缩包。
  • 解压下载的压缩包到你选择的目录,例如在 Windows 系统下可以解压到 C:\src\flutter,在 macOS 系统下可以解压到 ~/development/flutter

2. 配置环境变量

  • Windows 系统
    • 右键点击“此电脑”,选择“属性”。
    • 点击“高级系统设置”,在弹出的窗口中选择“环境变量”。
    • 在“系统变量”中找到“Path”,点击“编辑”。
    • 点击“新建”,添加 Flutter SDK 的 bin 目录,例如 C:\src\flutter\bin
  • macOS 系统
    • 打开终端,编辑 ~/.zshrc 文件(如果你使用的是 Zsh):
      nano ~/.zshrc
      
    • 在文件末尾添加以下内容:
      export PATH="$PATH:~/development/flutter/bin"
      
    • 保存并退出文件,然后运行以下命令使配置生效:
      source ~/.zshrc
      

3. 安装 Android Studio

  • 访问 Android Studio 官方下载页面,下载并安装适合你操作系统的 Android Studio 版本。
  • 在安装过程中,确保安装了 Android SDK 和相关工具。

4. 配置 Android SDK

  • 打开 Android Studio,点击“Configure” -> “SDK Manager”。
  • 确保安装了 Android SDK Platform 33 和 Android SDK Build-Tools 33.0.0 及以上版本。
  • Windows 系统:配置 Android SDK 的环境变量,在“系统变量”中新建“ANDROID_HOME”,值为 Android SDK 的安装路径,例如 C:\Users\YourUsername\AppData\Local\Android\Sdk。在“Path”变量中添加 %ANDROID_HOME%\platform-tools%ANDROID_HOME%\tools
  • macOS 系统:在 ~/.zshrc 文件中添加以下内容:
    export ANDROID_HOME=~/Library/Android/sdk
    export PATH="$PATH:$ANDROID_HOME/platform-tools"
    export PATH="$PATH:$ANDROID_HOME/tools"
    
    保存并退出文件,然后运行 source ~/.zshrc 使配置生效。

5. 在 Android Studio 中安装 Flutter 和 Dart 插件

  • 打开 Android Studio,点击“File” -> “Settings”(Windows/Linux)或 “Android Studio” -> “Preferences”(macOS)。
  • 在左侧菜单中选择“Plugins”。
  • 在搜索框中分别搜索“Flutter”和“Dart”,然后点击“Install”进行安装。安装完成后,重启 Android Studio。

6. 验证 Flutter 环境配置

  • 打开终端,运行以下命令检查 Flutter 环境配置是否成功:
    flutter doctor
    
    根据提示安装缺少的依赖项。
  • 在 Android Studio 中,点击“File” -> “New” -> “New Flutter Project”。
  • 选择“Flutter Application”,然后点击“Next”。
  • 配置项目的相关信息,如项目名称、保存位置等,确保“Flutter SDK path” 指向你之前解压的 Flutter SDK 目录。
  • 点击“Finish”创建项目。如果能够成功创建项目并运行,说明 Flutter 环境在 Android Studio 中配置成功。
目录
相关文章
|
5月前
|
Android开发 Windows
Android studio 报错Connect to 127.0.0.1:8888 [/127.0.0.1] failed: Connection refused: connect(已解决)
这是一篇关于解决Android Studio报错“Connect to 127.0.0.1:8888 failed: Connection refused”的文章。问题通常因系统代理设置被Android Studio自动保存导致。解决方法是找到系统中Android Studio使用的gradle.properties文件(位于Windows的C:\Users\你的电脑用户名\.gradle或Mac的/Users/.{你的用户目录}/.gradle),删除或注释掉多余的代理配置后保存并重新Sync项目。希望此经验能帮助快速解决同类问题!
822 36
|
5月前
|
Java Android开发
Android studio中build.gradle文件简单介绍
本文解析了Android项目中build.gradle文件的作用,包括jcenter仓库配置、模块类型定义、包名设置及依赖管理,涵盖本地、库和远程依赖的区别。
519 19
|
Java 开发工具 Maven
|
9月前
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
126 1
|
8月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
479 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
9月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
319 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
8月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
547 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
9月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
293 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
9月前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
653 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
8月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
242 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

热门文章

最新文章