前言

非常感谢Vadaski大佬为这篇文章提供了很多技术支持，如果看完这篇文章你对Flutter感兴趣，还可以看看这篇文章，对于新手也是非常的友好。

在学习本章之前，如果你对一些flutter基础不是很了解，可以先看一下这篇文章，效果可能会更好一些

本章节，我们将会从零开始构建一个简单的基础页面，并对一些基础的widget进行介绍。

一、新建一个flutter项目

首先我们新建一个flutter项目，flutter会自动创建一个点击计数器的demo后我们删除掉里面的所有内容，从零开始构建一个自己的项目出来。

二、接下来我们将正式开始flutter的项目实战了

1.引入库

代码如下（示例）：

我们先导入一个material包，这个包是我们Android的外观和风格的包，有了这个包，就可以使用这个包中的组件，我们的APP在风格上就是Android的风格。

2.定义接口

代码如下（示例）：

我们需要定义一个打开app的入口，在这个主函数中，有一个runApp，我们需要告诉它，我们要运行的是什么，这里我们要运行的app叫MyApp。

3.创建StatelessWidget

代码如下（示例）：

在Android Studio中，可以通过输入stl来快速创建一个StatelessWidget。这样，我们app运行的就是我们的MyApp了，我们的MyApp就是我们创建的StatelessWidget页面。现在我们将会在MaterialApp()这里面去构建我们的页面了

4.创建一个Scaffold()

为了让开发者们能够更加方便的快速搭建起一个布局，Flutter 为我们提供了这个Scaffold，我们也把Scaffold叫作“脚手架”，我们将会利用Scaffold()来构建一个页面

5.创建一个AppBar

我们利用Scaffold，构建了我们app的顶部导航栏AppBar，在这里面，flutter自动为我们设置了默认的颜色和大小，那么我们该如何去定义我们的AppBar呢，别急，让我们按住Ctrl键再用鼠标左键点击我们的AppBar试试。

现在，我们看到了AppBar里面到底还有什么东西，我们可以来进行修改和添加。这里我用title来举一个例子。

6.创建顶部导航栏的文字

我们输入了title:以后，我们观察title的属性，它要求我们存放一个Widget，之前我们提起过，我们的文字，图片，按钮都是Widget，在这里，我们输入Text（“在这里面输入文本内容”），这样我们的文本Widget就创建好了。

最后我们运行一下看看效果：

7.修改文本的样式

既然我们说到文本Text是一个Widget，那我们再次点开Text看看，我们可以对Text进行哪些操作。

在这些属性中，我们用style来举一个例子。注意：我们是对Text进行修改，所以我们的style要放在Text()当中。

我们可以看到，我们的style需要是一个TextStyle，所以，我们只需要输入TextStyle()就可以了。

就像这样：

那么这个TextStyle()怎么使用呢，别急，我们再点开看看，我们可以怎么去使用它。

这个TextStyle有很多属性可以让我们去设置，这里，我们将用color和fontSize来举例。

我们的color和fontSize都是TextStyle的属性，所以要写在TextStyle的括号里。

我们设置颜色为黑色，然后字体大小为16。

8.效果展示

最后我们运行一下我们的app看看效果：

三、知识点梳理

这就是本章节要讲的内容，知识点其实不是很多，但是需要消化，知道如何去创建一个项目，Material是什么，如何运用我们的脚手架来搭建一个app的顶部导航栏AppBar，以及如何设置我们的AppBar。

总结