资讯专栏INFORMATION COLUMN

安装与配置Flutter开发环境

enrecul101 / 312人阅读

摘要:本文我们就来介绍在系统下安装与配置开发环境,并且运行我们的第一个应用为了的安装配置顺利,请。安装完成后重启。另外还需要安装配置开发环境和开发环境。

这篇博客我们介绍了Flutter,并且对比了H5,React Native,Flutter。

由于Flutter是跨平台的开发框架,开发一次可以同时运行在Android和iOS上面,所以我们开发时最好使用Mac系统,这样我们可以同时测试两个平台的运行效果。

本文我们就来介绍在Mac系统下安装与配置Flutter开发环境,并且运行我们的第一个Flutter应用!

为了Flutter的安装配置顺利,请*。**

安装Flutter SDK
  1. 首先,我们需要首先下载Flutter的SDK,通过官网的这个链接可以找到每个版本的下载链接,找到最新稳定版下载。写这篇文章时的最新版是v1.2.1版本,我们就以这个版本来举例。
  2. 下载完成后我们对SDK进行解压,可以解压到任何位置。我们这里解压到用户主目录下的development目录。下面我们打开终端执行以下命令:

    mkdir ~/development
    cd ~/development
    unzip ~/Downloads/flutter_macos_v1.2.1-stable.zip
  3. 将解压后的路径加入到环境变量中。
    • 打开用户目录下的.bash_profile文件,如果没有则新建这个文件:
    > ~/.bash_profile
    • 在这个文件的最后添加SDK的路径到PATH中:
    export PATH="用户路径/development/flutter/bin:$PATH"
    • 然后执行source让配置生效:
    source ~/.bash_profile
检查Flutter安装状态

配置好后,Flutter提供了一个检查安装状态的命令:

flutter doctor

运行以终端会输出当前的Flutter环境是否正确,还需要安装什么等等,比如Android SDK,iOS的开发环境等等。

配置iOS开发环境

如果在Mac系统上开发Flutter应用,笔者推荐使用iOS模拟器进行开发调试,因为iOS模拟器相比Android模拟器要更加快速与流畅。

安装Xcode
  1. 从Mac App Store搜索并安装Xcode。
  2. 安装完成后在终端里执行以下命令配置最新的命令行工具:

    sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  3. 打开一次Xcode并接受许可协议,或者通过命令行运行下面命令:

    sudo xcodebuild -license
配置iOS模拟器
  1. 通过命令行打开一个模拟器:

    open -a Simulator
  2. 选择模拟器,然后通过Hardware -> Device菜单查看确保当前模拟的是iPhone5s之后的机型。

配置Android开发环境

下面我们来介绍安装Android的开发环境。

安装Android Studio
  1. 从官网下载最新版的Android Studio。

  2. 打开Android Studio,根据安装向导提示安装最新版的Android SDK,Android SDK Platform-Tools,Android SDK Build-Tools。

配置Android模拟器
  1. 打开Android Studio后选择Tools > Android > AVD Manager,然后选择Create Virtual Device(创建虚拟设备)。

  2. 填入设备的信息然后下一步,选择镜像的时候最好选择架构x86或者x86_64,因为和电脑的架构一致,否则如果选择ARM架构的话模拟器运行后会非常卡顿。

  3. (可选)选择Hardware - GLES 2.0来进行硬件加速,以使模拟器获得更好的运行速度。

  4. 一切都选好后点击Finish即完成配置。

配置代码编辑器(IDE)

虽然Flutter开发可以使用很多IDE,比如Android Studio,IntelliJ IDEA,VS Code等等,你可以根据喜好进行选择。

但是笔者建议使用Android Studio,因为它对Flutter开发支持的最好,并且谷歌官方也是推荐使用它。

下面我们就来介绍Android Studio的配置。

  1. 打开Android Studio。
  2. 安装Flutter插件。选择菜单Preferences > Plugins 然后点击Browse repositories搜索Flutter,找到后开始安装。
  3. 当跳出安装Dart插件的界面时,也点击Yes进行安装。
  4. 安装完成后重启Android Studio。

上面我们已经完成了Flutter开发环境的配置,下面我们就开始创建我们的第一个应用吧!

Flutter初识,第一个应用!

我们打开Android Studio,然后选择开始创建Flutter工程:

然后选择Flutter Application,并点击下一步:
-w795

在这个几面填入你的工程名,SDK位置与保存位置等信息:
-w798

点击下一步后,需要输入你的包名,也就是你的域名,没有域名的话输入自己的名字一类的域名,目的就是为了保证你的应用的唯一性。
-w799

信息输入完成后我们点击"Finish"按钮即可完成工程的创建。

当我们的工程编译完成后,可以选择不同的平台运行,如图所示:
-w416

默认的工程是一个简单的计数器,选择不同的平台运行后可以看到运行后的界面:

恭喜!第一个程序运行成功地运行起来了!

接下来我们就可以深入研究Flutter的强大特性了!

总结

本篇文章-Flutter的安装配置并不复杂。另外还需要安装配置iOS开发环境和Android开发环境。当然如果只是学习的话安装iOS即可,如果你的电脑是Windows或者Linux的话,此时只能安装配置Android开发环境了,因为iOS的开发环境只能在Mac上配置。还有Flutter的热部署也会使开发效率提升很多,大家可以试着改一些代码体验一下。

我的博客中关于Flutter的所有文章可以点击这里找到,欢迎关注!

如果有问题可以留言,或者给我发邮件lloyd@examplecode.cn,期待我们共同学习与成长!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2411.html

相关文章

  • 1.Flutter开发工具准备开发环境搭建

    摘要:选择硬件配置文件,然后点击。如果您未看到自己所需的硬件配置文件,您可以创建或导入一个硬件配置文件。该命令检查您的环境并在终端窗口中显示报告。 一、Android Studio安装 1.系统要求 2. 安装Android Studio 3.为了Android Studio 安装Flutter和...

    2450184176 评论0 收藏0
  • 一文读懂Flutter的搭建运行

    摘要:在本文中,我们将带大家进一步了解的搭建与运行。操作系统或更高版本磁盘空间工具依赖或更新的版本和命令行工具这些命令行工具。运行应用程序定位到工具栏在中选择一个运行该应用的设备。 作者:个推iOS开发工程师 伊泽瑞尔 Flutter是Google推出的跨平台的解决方案,用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架。 之前我们为大家介绍了《跨...

    JayChen 评论0 收藏0
  • 浅谈跨平台框架Flutter的搭建运行

    摘要:在本文中,我们将带大家进一步了解的搭建与运行。操作系统或更高版本磁盘空间工具依赖或更新的版本和命令行工具这些命令行工具。运行应用程序定位到工具栏在中选择一个运行该应用的设备。作者:个推iOS开发工程师 伊泽瑞尔Flutter是Google推出的跨平台的解决方案,用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架。 之前我们为大家介绍了《跨平台框架F...

    ytwman 评论0 收藏0
  • 浅谈跨平台框架Flutter的搭建运行

    摘要:在本文中,我们将带大家进一步了解的搭建与运行。操作系统或更高版本磁盘空间工具依赖或更新的版本和命令行工具这些命令行工具。运行应用程序定位到工具栏在中选择一个运行该应用的设备。 作者:个推iOS开发工程师 伊泽瑞尔 Flutter是Google推出的跨平台的解决方案,用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架。 之前我们为大家介绍了《跨...

    Alan 评论0 收藏0
  • 让前端开发者失业的技术,Flutter Web初体验

    摘要:掌握可能是前端开发者翻盘的唯一机会。是开发必须的代码库。区别与应用,我们导入的是库而非,这是因为目前的接口并非和的完全通用,不过随着谷歌开发的继续,它们最终会被合并到一块。 Flutter是一种新型的客户端技术。它的最终目标是替代包含几乎所有平台的开发:iOS,Android,Web,桌面;做到了一次编写,多处运行。掌握Flutter web可能是Web前端开发者翻盘的唯一机会。 show...

    shiguibiao 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<