
3.5 创建Flutter 应用
本节我们将尝试编写Flutter 应用,感受Flutter 的语法特点和运行效率。首先我们将创建一个默认应用,接着尝试编写自己的应用,一起开始吧!
3.5.1 创建默认应用
本节用到的开发工具是VSCode,当然也可以使用Android Studio。我们要编写的应用整体功能很简单,主要涉及的内容有控件点击事件、setState(() {...}) 更新、Text 组件显示等。
接下来通过代码结合注释的方式来看一下这个应用的main.dart 的实现,具体如下。



执行以上代码,在通过 primarySwatch 属性来配置状态栏和标题栏的颜色后,我们会看到顶部状态栏、标题栏、按钮的主题色调变成绿色。
一般的入口文件通过MaterialApp 脚手架构建,其他页面可以不使用。我们先来看一下MaterialApp 脚手架构造方法都提供了哪些可配置的属性功能,具体如下。


可以看到,通过入口文件的MaterialApp 配置可以实现应用的整体显示和各类常用功能。接下来,我们再来看一下Scaffold 脚手架构造方法提供的可配置属性功能,具体如下。


同样,我们可以看到,通过Scaffold 脚手架可以很快地搭建出一个个性化页面,基本可以实现页面上所需的大部分功能,达到预期显示效果。
3.5.2 创建自己的应用
有了前面的内容作为基础,接下来我们自己动手编写一个简单的页面,实现“显示一段文字和一张图片,按下按钮切换文字内容”的效果,具体代码如下。



通过flutter run 命令将以上示例编译、运行到真机或模拟器上,运行效果如图3-21 所示。

图3-21 Flutter 示例效果
怎么样?效果是不是很好?而且构建这个页面相比于用其他语言进行构建要简单得多,运行非常流畅,体验非常好。
本节主要给大家讲解了用Flutter 创建应用的方法。俗话说“熟能生巧”,我们不但要理解理论知识,也要时常动手实践,熟练掌握实践方法才能更好地进行深入研究和开发。