• MAC安装Flutter、Flutter工程创建、Flutter引用三方库


    一、安装

    Flutter是什么?

    Flutter是Google一个新的用于构建跨平台的手机App的SDK。写一份代码,在Android 和iOS平台上都可以运行,flutter的开发语言是Dart。

    Flutter的第一个版本被称为“Sky”,运行在Android操作系统上。它是在2015年Dart开发者峰会上亮相的,其目的是能够以每秒120帧的速度持续渲染。

    Beta1版本于2018年2月27日在2018 世界移动大会公布。

    Beta2版本2018年3月6日发布。

    1.0版本于2018年12月5日(北京时间)发布。

    MAC 系统环境要求

    Flutter因为是新出的框架,所以对系统还是有一定的要求的。

    系统:MacOS(64-bit)

    软件:Android Studio、Xcode等编辑工具。

    下载Flutter SDK包(建议挂梯子)

    官网链接:https://flutter.io/setup-macos/

    点击 Get the Flutter SDK 下载当前最新版本SDK

    **没有找到梯子的可以试试:

    export PUB_HOSTED_URL=https://pub.flutter-io.cn

    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

    vim ~/.bash_profile

     配置文件中添加

    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

    重新加载

    source ~/.bash_profile

    环境变量配置

    压缩包下载好以后,解压(找一个自己能找到的文件路径,这个路径配置的时候需要 ~亲~)

    1、打开终端工具,使用vim进行配置环境变量,执行命令:

    vim ~/.bash_profile

    2、配置文件中添加路径

    export PATH=/Users/奶瓶瓶/flutter/bin:$PATH       /// Users/奶瓶瓶/flutter/ 这个路径是解压路径哦~亲~

    3、配置文件完成后,执行命令如,重新加载:

    source ~/.bash_profile

    4、使用 help 命令检查是否安装成功,执行命令:

    flutter -h

      出现flutter 命令表即安装成功

    检查开发环境

    flutter doctor

    检查结果

    [✓] Flutter (Channel stable, 1.22.4, on Mac OS X 10.15.5 19F101 darwin-x64,
        locale zh-Hans-CN)
     
    [!] Android toolchain - develop for Android devices (Android SDK version 27.0.3)
        ✗ Flutter requires Android SDK 29 and the Android BuildTools 28.0.3
          To update the Android SDK visit
          https://flutter.dev/docs/get-started/install/macos#android-setup for
          detailed instructions.
        ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
          --android-licenses
    [✓] Xcode - develop for iOS and macOS (Xcode 12.1)
    [!] Android Studio (version 3.1)
        ✗ Flutter plugin not installed; this adds Flutter specific functionality.
        ✗ Dart plugin not installed; this adds Dart specific functionality.
    [!] IntelliJ IDEA Ultimate Edition (version 2017.3.5)
        ✗ Flutter plugin not installed; this adds Flutter specific functionality.
        ✗ Dart plugin not installed; this adds Dart specific functionality.
    [!] VS Code (version 1.49.1)
        ✗ Flutter extension not installed; install from
          https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
    [✓] Connected device (1 available)
    
    ! Doctor found issues in 4 categories.

       提示的是必须安装,提示[!]的是警告⚠️可以暂时忽略。

    解决提示的问题(Android为例,根据终端返回错误信息解决)

    打开 Android Studio, 打开 plugins ,安装 flutter

    点击 Install 按钮安装

    安装完成后 重启 AndroidStudio

    终端 执行命令:

    flutter doctor

    终端执行返回成功结果:

    二、创建工程

    1、新建flutter_demo文件夹,打开终端,执行命令:

    cd /Users/奶瓶瓶/Desktop/flutter_demo

    2、创建工程

    flutter create flutterdemo  

    3、运行工程

      执行命令:

    cd flutterdemo
    flutter run

      或者 直接用Xcode打开flutterdemo/ios目录下的iOS工程

     三、flutter引用并安装第三方库

      使用 pubspec.yaml 管理三方库

       打开 flutterdemo 下 pubspec.yaml 文件,例如添加 flutter_ijkplayer 的 0.3.5 版本,文件添加 flutter_ijkplayer: ^0.3.5 如下:

    dependencies:
      flutter:
        sdk: flutter
      # The following adds the Cupertino Icons font to your application.
      # Use with the CupertinoIcons class for iOS style icons.
      cupertino_icons: ^1.0.0
      flutter_ijkplayer: ^0.3.5

      在 flutterdemo 文件下 执行命令:

    flutter packages get

     重新打开工程即可

  • 相关阅读:
    skywalking监控配置tomcat的参数
    weblogic启动受管理节点
    JavaScript中的数组遍历forEach()与map()方法以及兼容写法
    ajax与HTML5 history pushState/replaceState实例
    mongoose参考手册
    mongoose
    解决ul里最后一个li的margin问题
    前端开发中最常用的JS代码片段
    CSS3精美前端
    60个有用的css代码片段
  • 原文地址:https://www.cnblogs.com/zxs-19920314/p/mac_install_Flutter.html
Copyright © 2020-2023  润新知