美文网首页Flutter
Flutter学习之环境搭建

Flutter学习之环境搭建

作者: 儿歌八万首 | 来源:发表于2020-08-10 19:47 被阅读0次

MacOS上搭建Flutter开发环境

  • flutter官网下载最新的安装包,https://flutter.io/sdk-archive/#macos
  • 解压安装包到你想安装的目录。直接解压或者是用unzip命令
  • 打开mac终端,输入命令 open -e .bash_profile打开环境变量配置,在打开的文件中添加下面这段配置:
export PATH=$PATH:/Users/caojing/flutter/flutter/bin  
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

其中第一行的PATH 是你flutter的解压后的目录路径,第二行和第三行是路径下面的tools和 platform-tools文件夹,
最后两行是flutter的国内镜像。
配置完成后,执行source ~/.bash_profile命令,刷新当前终端窗口。

  • 配置完成后在终端输入命令:flutter doctor检查你的环境并在命令行窗口中显示报告。命令执行完成后会出现下面这段代码,我这里是Android studio环境已经配置好了,所以如果Android studio环境没配置好需要配置好Android studio环境,这个下面会讲到。当然如果你是iOS开发也可以直接配置Xcode环境。
caojingMBP:~ caojing$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.6 19G73, locale
    zh-Hans-CN)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
[✓] Android Studio (version 4.0)
[!] IntelliJ IDEA Ultimate Edition (version 2020.1.2)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

在windows中配置环境变量实际上更简单,打开环境变量配置对话框,将上面的环境变量配置到Windows中即可。这里就不做过多说明。

Android Studio配置和使用

  • 在Android Studio上安装flutte和dart插件

    1. 打开插件设置 (macOS:Preferences>Plugins, Windows:File>Settings>Plugins)

    2. 选择Marketplace,在搜索框中输入flutter和dart插件分别安装。

    3. 重启Android Studio后插件生效。

  • 安装完成后,我们可以新建一个flutter项目来体验一下flutter的热重载功能

    1. 选择 File>New Flutter Project 。

    2. 选择 Flutter application 作为 project 类型, 然后点击 Next。

    3. 输入项目名称 (如 myapp),然后点击 Next。

    4. 点击 Finish。

    5. 等待Android Studio安装SDK并创建项目。

相关文章

  • 日常记录

    2019年1月29日flutter环境搭建 参考这篇文章《Flutter之Windows环境搭建》注意这点,fl...

  • Flutter.1.基础搭建

    一. flutter环境搭建 环境搭建跟着搭建flutter走. 问题 在执行flutter docter 的时候...

  • Flutter 踩坑之环境搭建

    对于前端来说, flutter 学习的难点在于环境搭建在跟随 技术胖:Flutter开发环境搭建Windows版 ...

  • iOS中RN与Flutter混合开发

    一 搭建环境 1. 搭建flutter环境 1.1 搭建系统开发环境 参考链接:https://flutter....

  • flutter学习之环境搭建

    为什么学习flutter flutter 1.0版本一发布,就引起互联网企业的高度关注,而且在之后就引入到自家的产...

  • Flutter学习之环境搭建

    MacOS上搭建Flutter开发环境 flutter官网下载最新的安装包,https://flutter.io/...

  • flutter学习之搭建环境

    1.下载官方压缩包 https://flutter.io/docs/development/tools/sdk/a...

  • Flutter环境搭建

    Flutter环境搭建这里只介绍在macOS中Flutter的环境搭建,如需了解windows下的Flutter开...

  • Flutter开发环境搭建

    补一篇Windows搭建Flutter开发环境,由于Flutter发展很快,现在环境搭建也简单很多,Flutter...

  • sharesdk flutter集成从零指南

    Flutter环境搭建可以看下:Flutter环境搭建介绍flutter 使用的工具是VSCode 一 创建一个f...

网友评论

    本文标题:Flutter学习之环境搭建

    本文链接:https://www.haomeiwen.com/subject/wbxsdktx.html