美文网首页
Flutter 01 - 基本介绍、Windows 上面搭建 F

Flutter 01 - 基本介绍、Windows 上面搭建 F

作者: 一叶知秋的码拉松 | 来源:发表于2019-11-14 17:06 被阅读0次

    一、基本介绍

    Flutter 是谷歌公司开发的一款开源、免费的移动 UI 框架,可以让我们快速的在 Android 和 iOS 上构建高质量 App。它最大的特点就是跨平台、以及高性能。

    Flutter 基于谷歌的 dart 语言,如果没有任何 Dart 语言的基础,不建议直接学习 Flutter。

    建议先学习 Dart 语言的基本语法,然后再进入 Flutter 的学习。

    Dart documentation | Dart

    Dart基本语法参考 Demo

    市面上已经有很多的混合 App 开发框架了,但是有些混合 APP 开发框架主要是针对前端开 发者的:比如 ReactNative(基于 React)、Ionic(基于 Angular、Vue、React)。有些则是 针对.Net 平台针对.Net 开发者的比如:Xamarin

    Flutter 是谷歌基于 Dart 语言开发的一款跨平台的移动 App 开发框架。它针对的开发者是全 部开发者。它的性能相比 RN、Ionic 这样的框架要好一些,但是现在的手机设备上是看不出 任何区别的。

    由于谷歌的推广,以及国内阿里的闲鱼 App 是 Flutter 开发的。所以 Flutter 目前(2019 年 5 月 22)关注度非常高的框架。所以非常有必要学习。因为大家都在学,我们不学是不是就 有点 Out 了。但是我们要知道的一点就是 Flutter 还比较年轻,相比 Ionic、以及 RN 这样的 老框架来说社区不是特别完善。还有就是学习成本高。希望未来社区能更加完善、学习成本 更低。

    二、Windows 上面搭建 Flutter Android 运行 环境

    1、电脑上面安装配置 JDK

    1. 下载安装JDK

    2. 配置 JDK

    2.1 系统变量里面新增 JAVA_HOME,设置值为 java SDK 根目录:

    编辑系统变量

    2.2 系统变量找到 Path 在 Path 环境变量里面增加如下代码

    ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin 

    2、电脑上下载安装 Android Studio

    下载安装 Android Studio

    Android Studio图标

    3、电脑上面下载配置 Flutter SDK

    1. 下载 Flutter SDK

    2. 把下载好的 Flutter SDK 减压到你想安装 SDK 的目录如(E:\flutter_windows\flutter)

    Flutter SDK 安装目录

    3. 把 Flutter 安装目录的 bin 目录配置到环境变量.

    如上图所示需要把 E:\flutter_windows\flutter\bin 目录配置到 path 环境变量里面

    flutter目录配置

    4、电脑上配置 Flutter 国内镜像

    搭建环境过程中要下载很多资源文件,当一些资源下载不了的时候,可能会报各种错误。在

    国内访问 Flutter 的时候有可能会受到限制,Flutter 官方为我们提供了国内的镜像

    Flutter 社区中文资源

    Using Flutter in China - Flutter

    拉到 Flutter 中文网最下面有配置方式,把下面两句配置到环境变量里面

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

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

    Flutter 国内的镜像环境配置

    5、运行 flutter doctor 命令检测环境是否配置成功

    检测环境是否配置成功

    第一次运行的时候会提示下面错误:

    错误提示

    这个时候复制上面红色框框内的命令

    flutter doctor --android-licenses

    注意:提示输入 Y/N 的地方全部输入 Y

    解决错误

    6、打开 Android Studio 安装 Flutter 插件

    选择插件菜单 搜索 flutter 插件 安装 flutter 安装 Dart 插件 重启 Android Studio

     7、创建 Flutter 项目

    选择 Flutter 项目 选择 Flutter App 项目 设置路径 配置

    8、Android Studio 中导入 Flutter 项目,运行项目

    open an existing Android Studio project 下载 gradle 压缩包 已下在 gradle 压缩包 使用 gradle

    如果报错点击 File -> Sync Project With Gradle Files 重新下载 Gradle ,这个过程比较慢 10-30 分 钟左右。

    重新下载 Gradle

    如果弹出下面界面点击中间的,不然它又会重新下载 Gradle,等我们开发完成没事的时候升级。

    暂不更新 连上手机真机调试

     9、可能遇到的错误

    Gradle 提示 下载 Gradle 失败

    下载 Gradle 失败解决方案:

    1. 开启手机热点重试

    2. 谷歌或者百度搜索 “android Gradle 编译时下载依赖失败”

    相关文章

      网友评论

          本文标题:Flutter 01 - 基本介绍、Windows 上面搭建 F

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