打开项目 lib 目录下面的 main.dart .. 这个文件是 flutter 项目的入口文件 .. 打开以后清空一下文件里的内容 ... 我们会一起从头开始去做一些练习 ...

先在文件顶部导入 fluter 这个 package 里的 material ... packge:flutter/material.dart ... 因为 flutter 是基于 dart 语言编写的，所以文件的扩展名就是这个 .dart ..

material 一般指的是 google 公司推行的一套设计风格，或者叫设计规范 .. 比如颜色，文字排版，动画等等 ... 具体你可以参考 material.io 这个网站 ...

在 flutter 应用里面高度集成了 material 的设计风格，里面包含了很多 material widget ... widget 可以翻译成 小部件 ...

在我们的应用里面，可以直接使用这些小部件去创建应用的界面 ... 要使用它们就需要先导入这个 material.dart ...

main

应用的这个 main.dart 里面应该有个 main 函数， void main 表示函数不返回值，这个 void 指的就是什么也没有，空的 .. 函数里面可以使用 runApp 这个函数，去挂载应用的 root widget ...

在 flutter 应用里面，基本上你在界面上看到的所有的东西都是用 widget 组成的，文字是 widget，图像是 widget，间隔，对齐这些东西也都是 widget .. 一个 widget 里面可以包含另一个 widget，另一个 widget 里面又可能包含了其它的 widget ...

比如我打算在屏幕中间显示点东西 .. 这里可以用一下 Center 这个小部件 ... 在这个 widget 里面包含的子部件，会居中显示 .. 不同的小部件都有各自的一些属性，还有方法 .. 这个 Center 部件的孩子要放在 child 这个属性里面 ... 先添加一个 child 属性 ... 对应的值又是一个 widget ...

我要显示文字，所以可以使用 Text 这个 widget ... 显示的文字是 hello .... 然后再添加一个 textDirection ... 设置一下文字的阅读的方向 .. 值是 TextDirection.ltr，这个方向表示的是文字是从左向右阅读的 ...

预览

按一下 F5，可以打开编辑器的调试 ... 选择一个模拟器 ... flutter 会把编译好的应用安装到这个模拟器上运行 ...

完成以后 ... 在模拟器上会打开的编译好的应用 ... 在屏幕的中间会显示一个 hello ... 这个界面我们用了两个 widget ... 一个是 Center ... 它可以让它的孩子居中 ... 还有一个 Widget 是 Text，它是 Center Widget 的一个子 Widget ... 在这个文字 Widget 里面设置了要显示的文字 ... 还有文字的阅读方向 ...