Flutter入门-环境搭建

概述

Flutter简介

Flutter中文网

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

特点：

  1. 快速开发。毫秒级的热重载，修改后，您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。Flutter的热重载可帮助您快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以在亚秒内重载，并且不会丢失状态。

  2. 富有表现力和灵活的UI。快速发布聚焦于原生体验的功能。分层的架构允许您完全自定义，从而实现难以置信的快速渲染和富有表现力、灵活的设计。使用Flutter内置美丽的Material Design和Cupertino（iOS风格）widget、丰富的motion API、平滑而自然的滑动效果和平台感知，为您的用户带来全新体验。

  3. 原生性能。Flutter包含了许多核心的widget，如滚动、导航、图标和字体等，这些都可以在iOS和Android上达到原生应用一样的性能。使用Flutter的现代、响应式框架，和一系列基础widget，轻松构建您的用户界面。使用功能强大且灵活的API（针对2D、动画、手势、效果等）解决艰难的UI挑战。通过平台相关的API、第三方SDK和原生代码让您的应用变得强大易用。 Flutter允许您复用现有的Java、Swift或ObjC代码，访问iOS和Android上的原生系统功能和系统SDK。

  4. 统一的应用开发体验。Flutter拥有丰富的工具和库，可以帮助您轻松地同时在iOS和Android系统中实现您的想法和创意。 如果您没有任何移动端开发体验，Flutter是一种轻松快捷的方式来构建漂亮的移动应用程序。 如果您是一位经验丰富的iOS或Android开发人员，则可以使用Flutter作为视图(View)层， 并可以使用已经用Java / ObjC / Swift完成的部分（Flutter支持混合开发）。

环境搭建

须知

1、Flutter开发环境支持

  • Windows
  • Mac
  • Linux

2、跨平台

  • Android，推荐使用真机作为开发设备，或者夜神模拟器，Android Studio的模拟器太卡，如果是Mac电脑，还可以使用Xcode模拟器，挺快的。
  • iOS，开发阶段可以使用Android设备切换iOS运行效果，不是说非要有iOS设备。
  • WIndow
  • Mac
  • Chrome Web
  • 小程序，不太建议，存在很多问题但是也有一些大厂解决方案，个人觉得还不如直接进行小程序开发。

3、开发工具选择
推荐使用VSCode作为主要开发工具，占用内存小，速度快。有时处理一些问题，可能还是需要使用Android Studio和Xcode作为辅助开发工具，分别调试android部分代码和iOS部分代码，比如百度地图集成。

4、参考资料

5、其它

  • Flutter使用Dart作为开发语言，需要提前学习Dart语言。

Mac搭建

搭建Flutter开发环境

参考：

1、下载Flutter SDK
在这里插入图片描述
下载后解压到自己的工作目录下。
在这里插入图片描述

2、配置环境变量

# flutter
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=$PATH:/Users/zhusheng/flutter/flutter3.3.0/bin

3、检查环境
在这里插入图片描述
正常情况下，缺少的就是Android Studio和Xcode，我们至少要安装一个，方便调试移动端代码。

4、安装VSCode

使用VSCode作为IDE，并安装一些插件，我的插件列表如下：

配置Xcode，我关于Dar的配置如下：
在这里插入图片描述

{
    "[dart]": {
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        "editor.rulers": [
            300
        ],
        "editor.selectionHighlight": false,
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        "editor.suggestSelection": "first",
        "editor.tabCompletion": "onlySnippets",
        "editor.wordBasedSuggestions": false
    },
    "dart.flutterTestAdditionalArgs": [
        "–no-sound-null-safety"
    ],
    "editor.fontSize": 14,
    "editor.rulers": [
        300
    ],
    "editor.wordWrap": "wordWrapColumn", 
    "editor.wordWrapColumn": 300,
    "dart.lineLength": 300,
    "html.format.wrapLineLength": 200,
}

搭建Android Studio开发环境

1、搭建过程略
2、在插件市场下载Flutter插件，让Android Studio支持Flutter开发工作流 (运行、调试、热重载等)
3、在插件市场下载Dart插件，提供代码分析 (输入代码时进行验证、代码补全等)

相关示意图如下：
说明：

  • 第一次运行项目会很慢，需要下载很多东西，对应版本的gradle，plaform-sdk，依赖等等。
  • 真机测试，只需要选择运行的设备为手机即可。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

搭建Xcode开发环境

AppStore下载Xcode安装即可。

测试

参考指令：

  • 创建项目 flutter create xxx
  • 启动项目flutter run

参考快捷键

  • r 热加载
  • R 热重启项目
  • p 显示网格，可以很好的掌握布局情况，常用
  • o 切换android/iOS预览模式
  • q 退出调试预览模式

1、使用VSCode将项目运行在Android Studio/XCode 模拟器上。
在这里插入图片描述
在这里插入图片描述

flutter支持 windows/mac/linux/android/ios/web/真机/模拟器

  • 查看当前可执行的所有设备，查看设备有没有上线 flutter devices
  • 运行在所有设备上 flutter run -d all（mac下测试不好使）
  • 运行在chrome上 flutter run -d chrome（mac测试ok）
  • 运行在windows上 flutter run -d windows (windows下使用)
  • 运行在mac上 flutter run -d macos(需要进行一些设置)

环境搭建还是比较简单的，建议使用VSCode + 真机进行测试，无论是Android Studio还是模拟器都太卡了。模拟器也可以使用第三方模拟器，ios没必要说安装xcode，只有在上线的时候可能需要进行测试和打包。模拟器或者android手机运行可以使用‘o’切换android/ios显示效果。

2、使用Android Studio调试项目

项目android部分代码
在这里插入图片描述
注意，代码都是自动生成的，每当执行pub get，会自动生成各个端的代码。Flutter会把一些配置文件，比如Manifest、logo、样式暴露给我们，也就是说我们可以可以进行修改，比如改改logo、改改包名、项目名称、配置第三方SDK等等。
在这里插入图片描述

3、使用Xcode调试项目

iOS部分代码
在这里插入图片描述
点击xcworkspace文件，自动使用xcode打开项目，同样的Flutter也会把Xcode项目的配置文件暴露给我们。

在这里插入图片描述

补充：4、使用VSCode将项目发布到Chrome浏览器的效果图
在这里插入图片描述

补充：5、使用VSCode将项目发布成Mac应用的效果图
在这里插入图片描述

异常

1、flutter run 运行报错Error: Cannot run with sound null safety

参考文档：
Flutter 1.20 中悄然带来的 null safety

解决办法：
在这里插入图片描述