Flutter最新的开发环境由Hello World

terry 2年前 (2023-09-23) 阅读数 77 #移动小程序

1搭建并发布。 Flutter 概述

Flutter 是 Google 的移动 UI 框架，可以在 Android 和 iOS 上快速构建高质量的原生 UI。它的前身是谷歌的实验项目Sky。主要有以下几个特点：
根据各个平台的用户体验
Flutter内置了Material Design和Cupertino风格（iOS风格）的小部件，这使得我们可以开发出符合Android的应用程序和 iOS 风格。此外，Flutter 还提供丰富的运动 API、平滑自然的滑动效果以及平台感知，为用户带来全新体验。

响应式框架
使用 Flutter 的响应式框架和一组基本构建块，您可以轻松构建 UI。使用强大而灵活的 API（用于 2D、动画、手势、效果等）帮助开发人员解决棘手的 UI 挑战。

跨平台自绘制机制
Flutter 与 Hybrid App、React Native 等跨平台技术不同。 Flutter既没有使用WebView，也没有使用各个平台的原生控件，而是自己实现了统一的界面渲染机制。对于UI绘制来说，这可以保证跨平台的UI一致性。另外，通过使用自绘制引擎，Flutter在布局过程中不需要像RN那样在JavaScript和Native之间进行通信，这可以节省性能成本。 Flutter 使用 Skia 作为 2D 渲染引擎。 Skia 是 Google 用于处理 2D 图形的函数库。它包括高性能且简单的字体、坐标转换和位图图形。 Skia 是跨平台的，并提供非常友好的 API。
使用 Dart 开发
Flutter 应用程序使用 Dart 语言开发。与 JavaScript 相比，Dart 本质上与 JIT（即时）模式下的 JavaScript 一样快。然而，当Dart以AOT模式运行时，Dart的性能高于JavaScript。

访问原生函数和 SDK 并支持插件
Flutter 可以重用 Java、Swift 或 ObjC 代码来访问 Android 和 iOS 上的原生系统函数。此外，还可以通过Flutter插件访问原生系统功能，例如蓝牙、Camera、WiFi等。

2。 Flutter开发环境搭建

如果是Windows平台开发，官方环境要求是Windows 7 SP1以上版本（64位）以及至少400MB硬盘空间。如果您在 Mac 和 Linux 上进行构建，请查看您的开发环境的官方文档。

2.1 安装Git for Windows和PowerShell 5.0

Git for Windows下载地址为：git-scm.com/download/wi… + R 进入cmd，在cmd中输入git命令进行验证，例如 git --version。 PowerShell是微软推出的一个更方便的命令行工具，用于替代cmd。所有win7、win8、win10系统都有这个命令行工具。右键单击WIn10启动按钮并搜索PowerShell。如果没有，请前往 powershell 官方网站并下载 PowerShell。地址是：docs.microsoft.com/zh-cn/power…

2.2 下载 Flutter SDK

下载 Flutter SDK 的方式有很多种，看看哪一种更适合你：

下载最新的Beta版本有flutter官方网站并安装：flutter.dev/docs/develo...
从Flutter github项目下载，地址为：github.com/flutter/flu ...
下载beta版本查看git 命令：

git clone -b beta https://github.com/flutter/flutter.git
复制代码

在此处下载最新的测试版。

将下载的安装zip包解压到您要安装Flutter SDK的路径，例如：F:\Flutter。注意，不要将flutter安装在需要高权限的路径，例如C:\Program Files\。

2.3 配置环境变量

配置flutter环境变量 要在命令行使用flutter命令，必须将flutter路径添加到系统变量path中。我的flutter路径是F:\Flutter\flutter然后将F:\Flutter\flutter\bin放入系统变量路径中。

在cmd中输入flutter --version检查是否配置成功。

原生镜像的配置

如果您在国内安装或使用Flutter，可以使用Flutter官方镜像或其他镜像，以避免限制并加快速度。 Flutter的官方镜像是

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
复制代码

这两个镜像会发生变化。详细可以看官方说明：flutter.dev/community/c… 另外，还有一个上海交通大学的Linux用户组：

PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn
FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn
复制代码

这里使用Flutter官方镜像，在用户环境中配置这两个URL变量：

2.4 安装并检查不同的依赖项

打开cmd，输入以下命令：

flutter doctor
复制代码

将会打印一些信息：

可以看到有五类依赖项。如果安装的IDE不同，分类内容也会不同。其中√为不需大惊小怪的类别！它指的是有问题的类别。

Flutter 版本和运行环境
Android 工具链
Android Studio 版本和 Flutter 插件安装
IntelliJ IDEA 社区版本和 Flutter 插件安装
设备连接

后续如果安装任何缺少的依赖项，您可以再次运行 flutter doctor 命令来检查一切设置是否正确。例如，如果其他项目出现问题，您可以通过运行 flutter doctor --android-licenses 来解决上述提示。完成此操作后，再次运行 flutter doctor 命令，打印提示将变为：

2.5 Settings Editor

安装 Android Studio 或 IntelliJ IDEA Android Studio 安装过程的细节我就不赘述了。您必须安装 3.0 或更高版本。如果您还没有下载，请在这里下载：developer.android.google.cn/studio/

除了 Android Studio，您还可以使用 IntelliJ IDEA：社区 IntelliJ IDEA 版本 2017.1 或更高版本 IntelliJ IDEA Ultimate ，版本 2017.1 或更高版本下载标题为：www.jetbrains.com/idea/downlo…

安装 Flutter 和 Dart 插件 Android Studio 文件 --> 设置 --> 插件 --> 浏览存储库，输入 Flutter 和 Dart在搜索框中安装它们。

安装成功后，重启Android Studio。这时在cmd中输入flutter doctor，会看到提示Android Studio版本依赖√。

2.6 设置 Android 设备和模拟器

设置 Android 设备与 Android 开发相同。请注意，此设备必须运行 Android 4.1（API 级别 16）或更高版本。模拟器可以通过 Android Studio 或 Genymotion 创建。建议使用 x86 或 x86_64 映像。我不会谈论如何连接设备和创建模拟器，这不是本文的重点。

3。在 Android Studio 菜单栏中运行 Flutter Demo

File --> New Flutter Project，选择 Flutter 应用：

项目名称必须小写，然后设置 Flutter SDK 的位置以及项目的位置，如果如需下载Flutter SDK，请点击install SDK进行下载，如下图所示。

创建项目后，从 Android Studio 顶部工具栏中的目标选择器中选择要运行的设备或模拟器。我选择了 Genymotion 创建的定制手机（Android 9.0）。

热重载 Flutter 提供快速开发周期和热重载，能够重新加载正在运行的应用程序的代码，而无需重新启动或丢失应用程序状态。我们来做一个实验。打开 lib/main.dart 并更改字符串您按下按钮的次数您单击按钮的次数。然后保存全部或单击工具栏中的黄色闪电图标，您会发现数组已更新为我们更改的值。

4.Hello World

将 lib/main.dart 中的所有代码替换为以下内容：

import 'package:flutter/material.dart';//1

void main() => runApp(MyApp());//2

class MyApp extends StatelessWidget {//3
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(//4
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
复制代码

Flutter 的 Hello World 现已完成。下面简单解释一下代码：

注1用于表示基本的Material Design风格包。几乎任何 dart 文件都会呈现它。丰富的 Material 小部件可在 Flutter 中使用。
注释2中的主要方法是进入Dart程序。它使用符号=>。这是 Dart 中单行函数或方法的简写。相当于下面的代码：

void main(){
return runApp(Widget app);
}
复制代码

runApp方法是On输入到Flutter框架中的，如果runApp方法没有返回，则执行Dart控制台应用程序。 3. 注3解释了MyApp继承了StatelessWidget，使应用程序本身成为一个widget。 Flutter有一切都是widget的概念，widget分为StatelessWidget（没有状态的widget）和StatefulWidget（有状态的widget）。 4.构建方法用于描述显示本身的其他较低层构建块的使用。 5. MaterialApp 包含应用程序执行 Material Design 所需的一些小部件，其中 title 是任务管理器窗口中显示的应用程序名称，home page 是应用程序默认显示的界面小部件。 6.Scaffold是Material Design布局结构的基本实现。 Scaffold 包含 appBar 和 body。 appBar 是位于 Scaffold 之上的应用程序栏； body 是Scaffold 的主要内容，通俗地说就是屏幕中较大的部分。注意4，body包含一个中央widget，并且中央widget有一个Text子widget，因此Hello World字符将显示在body的中间。

作者：刘望舒
链接：https://juejin.im/post/5cdc9eb351882511c910857d
来源：掘金
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明来源。