Flutter学习与实践

1. Flutter 简介与配置

2020-01-11  本文已影响0人  流浪四海

一. 背景

1.1 产生背景

随着移动互联网的发展,在业务需求、开发成本、迭代速度等方面有了越来越高的要求。为了解决这些方面的需求,Google提出了Flutter方案。

1.2 发布时间

2018年12月5正式发布Flutter 1.0版本。

1.3 Flutter

Flutter是Google发布的一个用于创建跨平台、高性能移动应用的框架。它完全没有使用原生控件,是实现了一个自绘引擎,使用自身的布局、绘制的框架。

二. Flutter SDK安装

本文是基于MAC环境搭建Flutter SDK环境的。推荐下载源码的方式。

2.1 下载Flutter源码

  1. git版本
    git --version
    git version 2.21.0 (Apple Git-122.2) 
    

备注: 本文的git版本是mac版本。

  1. 下载Flutter源码

2.2 Flutter SDK 安装

  1. 配置Flutter环境变量
    为了支持flutter命令,需要把flutter sdk加入到PATH中。

    open .bash_profile
    export FLUTTER_SDK=/Users/XXX/Downloads/Soft/Android/Flutter/bin
    export PATH=$PATH:$FLUTTER_SDK
    

    备注: /Users/XXX/Downloads/Soft/Android/Flutter 为用户存放Flutter 源码的位置。

  2. 检查Flutter安装

    which flutter    #查看是否有flutter命令
    flutter doctor   #查看flutter是否安装成功
    flutter doctor --verbose 
    

    备注1: flutter doctor会检查安装成功,下载相关依赖包,flutter/bin/cache下的相关数据;同意Android Licenses等。
    备注2: flutter下载的Dart SDK就存储在flutter/bin/cache/dart-sdk

  3. Flutter其它命令

    • flutter Config

      flutter config --android-sdk /xxx/xxx/xxx/xxx/Android/Sdk
      

      配置Android SDK目录。或者在.bash_profile中添加ANDROID_HOME指向Android Sdk目录。

    • flutter devices
      查看支持flutter的设备。

    • flutter channel
      查看flutter sdk的当前分支。

    • flutter --version
      查看flutter当前版本

    • flutter upgrade
      flutter sdk更新

    • flutter packages get
      下载应用依赖的第三方flutter库。

    • flutter packages upgrade
      更新应用依赖的第三方flutter 库版本。

2.3 关联目录

  1. dart的相关文件
    .dart
    .dartServer
    dart的分析数据存储位置,可能会很大。

  2. 配置文件
    .devtools
    .flutter
    .flutter_settings
    .flutter_tool_state

  3. 依赖库
    .pub-cache
    项目依赖的Dart Packages和Flutter Plugins,都下载在该目录下。

三. HelloWorld

笔者是基于Android Studio开发的,所以基于Android Studio,创建Flutter HelloWorld。

3.1 开发工具:Android Studio

笔者安装的是Android Studio 3.5.3。Android Studio的安装配置及Android环境的搭建,不在赘述。

3.2 安装Flutter插件

给Android Studio安装Flutter插件,在安装Flutter插件的过程中,会提示安装Dart插件。
问题1: 在Android Studio 3.5.1中安装了Markdown Navigator插件后,无法通过Android创建一个新的Flutter项目。
错误原因: 错误原因未知,可能和Markdown插件有冲突关系。
解决方案:

3.3 创建HelloWorld

  1. 打开 IDE,选择 新 Flutter 项目 (Start a new Flutter project).
  2. 选择 Flutter 应用程序 作为项目类型,然后点 下一步。
  3. 输入项目名称(比如 ‘myapp’)和选择Flutter SDK目录、项目存储位置等。填写后选择完成。

3.4 Flutter项目结构

  1. pubspec.yaml
    这里配置Flutter项目的依赖库、项目名称、项目描述等信息。
    使用flutter packages get来获取项目的依赖库。
  2. lib目录
    该目录下一般是用户开发的项目dart文件。
  3. android/ios
    该目录是存放生成对应平台的壳文件。
  4. res
    国际化语音包
  5. assets
    项目需要的图片资源
  6. test
    项目测试文件。

3.5 运行

  1. 运行(Run)
    正常的运行包含了:flutter packages get 、编译、安装过程。


    运行模式
  2. 热重载(带有闪电⚡️图标的按钮)。
    文件如果有改动,则用热重载来快速生效。


    热重载模式
  3. 性能测试(profile)


    性能模式

    如果需要对Flutter的性能进行测试,需要把项目跑在Profile Mode下。

  4. 发布模式(release)
    正式对外发布的Flutter apk版本。

四. 参考文档

Flutter 官网文档
Flutter 中国

上一篇 下一篇

猜你喜欢

热点阅读