写一个HelloWorld程序

环境搭建好后，按照惯例就是写一个HelloWorld程序，下面用最简单的结构，写一个HelloWorld，并介绍一下相关的Dart语法。

在环境搭建好之后，写HelloWorld 程序之前，首先要创建一个flutter 项目文件。

那如何创建一个flutter 项目文件呢？

请小伙伴们看另一篇简书：

已经了解的小伙伴们，可以跳过继续阅读(●'◡'●)。

一、HelloWorld整体代码

先快速写一个最简单的结构体，这个界面只包含两部分，头部订单的蓝色bar条和屏幕中间区域的内容。(人狠话不多，上代码)

这段代码是写在 根目录\lib\main.dart文件中，这就是Flutter的主文件。import 'package:flutter/material.dart';

//主函数(入口函数)  Dart的函数

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

// 声明MyApp类

class MyApp extends StatelessWidget{

//重写build方法

@override

Widget build(BuildContext context){

//返回一个Material风格的组件

return MaterialApp(

title:'Welcome to Flutter',

home:Scaffold(

//创建一个Bar，并添加文本

appBar:AppBar( title:Text('Welcome to Flutter'),

),

//在主体的中间区域，添加一个hello world 的文本

body:Center( child:Text('Hello World'),

),

),

);

}

}

在Android Studio 软件中是这种效果，老规矩上图：

Android Studio

写完后打开终端，运行flutter run,等待一小会，就会看到虚拟机中显示了Hello World的内容。上图：

雷电虚拟机，百度可以下载，运行自动加载页面

二、Dart语法Function函数

Dart是面向对象的语言，即使是函数也是对象，并且属于Function类型的对象。这意味着函数可以分配给变量或作为参数传递给其他函数。当然你也可以像JavaScript一样，调用一个函数。

比如我们写Hello World中的第2行，就是一个函数。void main() =>runApp(MyApp());

因为这个函数体里只有一行代码，所以可以直接使用=>来省略{}，只有函数体里只有一行时，才可以使用，否则请使用大括号。 有点像ES6 里面的箭头函数。感兴趣的小伙伴可以去研究一下ES6语法，相信大家都已经知道了。

学习Dart语法时你要记住一条，Dart里一切皆对象，包括数字和函数。。。

三、上面用到的 StatefulWidget 和 StatelessWidget

· StatefulWidget ： 具有可变状态的窗口部件，也就是你在使用应用的时候就可以随时变化，比如我们常见的进度条，随着进度不断变化。

· StatelessWidget：不可变状态窗口部件，也就是你在使用时不可以改变，比如固定的文字(写上后就在那里了，死也不会变了)。

上面的HelloWorld 代码就继承了不可变窗口部件 StatelessWidget。

四、 再说一下，在VSCode中如何热加载

用VSCode编写Flutter不好的一点就是要手动加载更新应用，这至少会降低我们15%的工作效率。

当我们运行flutter run以后，会有一段白色文字的提示，说明了我们可以作的事情：

VScode

来看几个重点的，也是一般常用的：

r 键：点击后热加载，也就算是重新加载吧。

p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。

o 键：切换android和ios的预览模式。

q 键：退出调试预览模式。

如果你觉的这太麻烦了，我们可以开启Debug模式，这时就可以实现真正的热加载了(保存，效果立即就会改变)，但有时报错，也挺烦人的。上图：

Debug

这个基本的结构很重要，小伙伴们可以多练习几遍，把基本结构记熟练。。。

一起加油ba。 阿巴阿巴阿巴。。。

阿巴