zoukankan      html  css  js  c++  java
  • 安装与配置Flutter开发环境

    这篇博客我们介绍了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,期待我们共同学习与成长!

  • 相关阅读:
    MKMapVIew学习系列2 在地图上绘制出你运行的轨迹
    WPF SDK研究 Intro(6) WordGame1
    WPF SDK研究 Intro(3) QuickStart3
    WPF SDK研究 Layout(1) Grid
    WPF SDK研究 目录 前言
    WPF SDK研究 Intro(7) WordGame2
    WPF SDK研究 Layout(2) GridComplex
    对vs2005创建的WPF模板分析
    WPF SDK研究 Intro(4) QuickStart4
    《Programming WPF》翻译 第6章 资源
  • 原文地址:https://www.cnblogs.com/lloyd-zh/p/10575966.html
Copyright © 2011-2022 走看看