Flutter Hello World

在说完 环境及配置 和 升级更新 之后那我们就可以来看看它的真正面目了。

前面我只提到了很零星的一些关于代码部分的内容，现在是时候揭开它的神秘面纱了。

不知大家是否还记得之前的创建flutter项目的命令？

flutter create myapp

这里我们创建一个 名叫 myapp 的 flutter项目。（别忘了要先进入你的工作文件夹）

创建 flutter 项目 myapp

稍等一下，等待项目创建完成……

这里创建项目会被分为 3部分执行：

1. create 部分 创建所需的文件结构、文件、代码以及编辑器所需配置信息。（66个文件）
2. 文件部分创建完成后会执行 flutter pub get 命令来更新所需依赖。
3. 依赖更新完成后，会执行检查开发环境，检查完成后提示 cd myapp & flutter run 来运行你的应用。

创建 flutter 项目完成

Ok，创建完成后，就简单说一下项目结构吧。

flutter 项目结构

文件夹里更具体的内容就需要自己探索了，我就不细说了。如果要全部说一遍那就太长了。

对了，部分代码里会有 Do not edit. 的注释，这就需要自己发现这个彩蛋了。

做为 flutter 开发还是要关注重点的，那就是 lib 文件夹。这里是主要的编码目录，我们编写的代码也是放在这个目录下。该目录会有默认的一个入口文件 ，main.dart 通过这个文件后缀就可以知道 flutter 主要是使用 dart 语言来进行编写。

myapp 的默认 main.dart

当你一打开这个 main.dart 文件就会感觉“哎哟，这么长这么多，看不懂啊！”。

那我就先把这些注释删除……

删除注释的 main.dart

这还是好长啊……

没关系，如果你之前看过 flutter 中文网的话，代码编写部分会有让你删除 main.dart 的内容。然后复制教程提供的代码运行得到 hello world。

这时你会想，这就完事了？

当然没完！

我们是来学习的，不能复制粘贴一把梭就敷衍了事了。

这里以我的为例，以后均以此配置和环境为基础

• 操作系统： Window 10
• 编辑器： Visual Studio Code
• 插件： Flutter（自带安装Dart SDK），yaml
  • 选装插件： Java or C/C++ 
• 工具： Flutter 依赖下面这些命令行工具。
  • Git for Windows (Git命令行工具)
• 设备： 虚拟机 or 真机
• 项目类型： Flutter
• 项目名称： myapp
• 编程语言： Dart

01 - main

既然是要学习，那就要拿出学习的精神来，从0开始！

所以……

我们还是把代码删了吧。

大侠且慢，别打脸！且听我说……

因为默认的例子和官网教程虽然是可以运行了，但是我觉得还是不够详细。所以既然是要学习的话，为什么不从0开始学习，一点一点来把他搞懂来呢？对吧？

（有道理，这次就先放过你）

现在开始进入正题，代码都清空了之后怎么办？

不要着急清空代码先，新建文件 lib\main1.dart 把官网的代码复制过去再清空，这样一来有个参照理解对吧？

就像这样。

复制参照代码

复制参照代码

先说第一行，有点基础的同学们都知道这是引入一个东西，但具体是什么东西呢？我就要来解释一下啦：

// 引入 Material Design 设计语言（基于 Dart 的 flutter 版本）
import 'package:flutter/material.dart';

解释：

Material Design 设计语言（基于 Dart 的 flutter 版本），Material Design 是由 Google 推出的全新的设计语言。谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。其他人怎么翻译我不太清楚，但是我认为中文可以翻译为 “质感设计”。

（这么长记不住怎么办？！）

记不住没关系，这时候我们就要善用 VS Code 或其他编辑器工具的提示功能了。只要输入

import 'pfm';

就会有提示了，这时候只要选第一行就Ok啦

引入包提示

接下来会看到这一句：

// 每个应用都需要有个顶级的 main() 入口函数才能执行。
// main() 函数的返回值为 void
void main() => runApp(new MyApp());

main 是 dart 的顶级函数，也是入口。

对于不太懂的少侠们可以看看

[Dart 中文网]：http://dart.goodev.org/

箭头函数？这个箭头函数和 JavaScript 的箭头函数不太一样。在还没深入理解Dart语法的时候我们尽量不要使用较为高级的用法。还原如下

void main() {
  runApp(new MyApp());
 }

这样看起来是不是就比较熟悉了？

这里还有调用了一个 runApp 的函数，这是什么东西？

02 - runApp

runApp 是 flutter 的入口函数，所以如果要使用的话那就必须调用 runApp 才能启动 flutter 项目，不然的话就会报错了。

runApp 提示

这里代码提示还告诉我们 runApp 函数仅接受一个叫 Widget 的参数，这个又是什么东西？

Flutter 中文网 - Widget 框架概述

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改（译者语：类似于React/Vue中虚拟DOM的diff算法）。

那现在应该就能理解 Widget 了，Widget 是一个用来构建UI的框架，则 runApp 函数接受给定的 Widget 并使其成为 Widget 树的根。

关于 Widget 框架的内容

[Widgets 目录]：

https://flutterchina.club/widgets/

了解了 main、runApp、Widget 之后我们就可以再次改写代码：

void main() {
  runApp(
    Center( // 居中
      child: Text( // 文字对象
        'Hello World!', // 文字内容
        textDirection: TextDirection.ltr, // 文字输出方向
        // textDirection 在使用虚拟设备时需要写明，不然无法编译通过。
        // 使用真实设备 或 Material 时无需写明文本方向，均会自动处理。
      ),
    ),
  );
}

启动项目后就可以看到

无 material 的 hello world

恭喜你，你已经可以对外宣称“精通 flutter hello world 的编写”了。

接下来我们继续往下看，代码中定义了一个叫 MyApp 的类。

这时候你以为我的标题要写 03 - MyApp ？

03 - State x Widget

不好意思，你猜错了

MyApp 它继承自 StatelessWidget 。所以我要说的是关于继承的这个东西。

Flutter 中文网 - Widget 框架概述

在编写应用程序时，通常会创建新的widget，这些widget是无状态的StatelessWidget或者是有状态的StatefulWidget， 具体的选择取决于您的widget是否需要管理一些状态。widget的主要工作是实现一个build函数，用以构建自身。

换句话说 StatelessWidget 和 StatefulWidget 都是 Widget 的抽象类。唯一不同的是：

• StatelessWidget 是无状态的，意味着无法通过数据变更而更新
• StatefulWidget 是有状态的，意味着可以通过数据变更而更新，需要通过setState 来管理状态。

由于 StatelessWidget 和 StatefulWidget 都是 Widget 的抽象类。所以我们在使用的时候就需要重写 Widget 类来实现具体的代码和逻辑。重写 Widget 时我们就需要用到@override 来装饰需要重写的部分。（@override 装饰关键字，如果对于后端语言不熟悉的少侠们那就需要动手查找资料啦，不然说起来就太长了）

参照右边代码的话这时我们就可以正式使用 MaterialApp 了。

// 继承自 StatelessWidget
class MyApp extends StatelessWidget {
  // 重写 Widget 类实现
  @override
  Widget build(BuildContext context) { // Widget 实现构建 build 函数
    // TODO: implement build
    return MaterialApp();
  }
}

保存之后，在控制台中按下 r 键就能看到效果了，一个红彤彤的的错误警告信息。

什么？你居然不知道 r 键什么意思？那你现在还不立刻马上赶紧回去复习？！！

错误警告信息 - MaterialApp

04 - MaterialApp

少侠莫慌，不要害怕！我来告诉你这是怎么回事。让我们来先看一下 MaterialApp 的源码部分。

MaterialApp 部分源码

唉？这个1234 是不是很熟悉啊？是不是好像哪里见过？

唉~没错！，就是刚刚错误警告信息里的1234，只不过屏幕太小没有显示完全。这里我们看到最后一行的说明：

If [home], [routes], [onGenerateRoute], and [onUnknownRoute] are all null, and [builder] is not null, then no [Navigator] is created. 如果 [home], [routes], [onGenerateRoute] 和 [onUnknownRoute] 都为 null 并且 [builder] 不为 null 那么将不会创建 [Navigator]。

这里还是没说为什么啊。那我们继续往下看……

MaterialApp 部分源码

我们来看，注意这一句话：

Creates a MaterialApp. At least one of [home], [routes], [onGenerateRoute], or [builder] must be non-null. 创建 MaterialApp [home]，[routes]，[onGenerateRoute] 或 [builder] 中的至少一个必须为非 null。

那现在应该了解了。我们缺少了必要的代码实现，那就先来个最简单的 [home]，所以可以将代码修改为：

// 继承自 StatelessWidget
class MyApp extends StatelessWidget {
  // 重写 Widget 类实现
  @override
  // Widget 实现构建 build 函数
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // 实现 home 函数
      home: Center( // 居中
        child: Text('hello world'), // 文字内容
      ),
    );
  }
}

保存代码，然后 R 一下。（注意！我没有打错字，因为对代码的渲染结构进行了更改，所以需要使用 R）

什么？你居然不知道 R 键什么意思？那你现在还不立刻马上赶紧回去复习？！！

什么？你居然还分不清 r 和 R 的区别？！！你……走吧……我没有你这样的____！

使用 material 的 hello world

哇！这怎么这么丑？谁家APP界面会长这样啊？

05 - 使用主题

少侠不要着急嘛，再说了“罗马都不是一天建成的”要打好基础循序渐进。

参照右边的代码会发现这里 用 Scaffold 来实现了 home 函数。我们在来看看源码，看看这到底是个什么东西：

Scaffold 部分源码

我们来看到这一句：

Creates a visual scaffold for material design widgets. 为“质感设计”部件创建一个可视化的支架。

噢（恍然大悟）~原来这才是 UI 的框架啊？

也不全对，我的理解应该是这样：

• Material 是设计规范（标准）
• Scaffold 是实现了设计规范的可视化支架（标准实现）
• Widgets 是 UI 框架，但实现了更具体的一些的对象，例如文本框（Text），行（Row），列（Colum）等（具体实现）

所以只要 Widget 提供了所需的内容给 Scaffold，那么 Scaffold 就会实现为对应的设计标准 Material。

所以最终的代码和运行结果：

import 'package:flutter/material.dart';

void main() {
  runApp (MyApp());
}

// 继承自 StatelessWidget
class MyApp extends StatelessWidget {
  // 重写 Widget 类实现
  @override
  // Widget 实现构建 build 函数
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold( // 使用 Scaffold 实现 home 函数
        // 导航栏（顶部）显示文字
        appBar: AppBar( // 导航栏（顶部）
          title: Text('Welcome to Flutter'), // 文字内容
        ),
        
        // Scaffold 的容器 body
        body: Center( // 在容器中居中显示文字
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

flutter - hello world

完美！

最后总结：

• 在学习一门新的编程语言或者框架时，切勿着急囫囵吞枣，复制粘贴一把梭只能让你学会“形”而学不会“意”。
• 知道为什么，才能更好的在实践当中去运用。
• 官方文档永远是最好的入门素材之一。官网是英文的怎么办？国内IT行业已经发展了多年，中文社区大概率是会有的。
• 学好英文，太前沿的领域和内容就需要自己去探索了。

感谢大家的喜欢！

欢迎 关注、留言、分享、转发、在看。

参考来源：

Dart 中文网： http://dart.goodev.org/ Dart 语言概述： 引http://dart.goodev.org/guides/language Flutter Widget 框架概述： 引https://flutterchina.club/widgets-intro/ Widgets 目录： 引https://flutterchina.club/widgets/