P05.Flutter 编写一个HelloWorld程序

1. HelloWorld 整体代码
2. Dart 语法 Function 函数
3. StatefulWidget 和 StatelessWidget
4. VSCode 中如何热加载

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

HelloWorld 整体代码

在根目录/lib/main.dart文件中，这就是 Flutter 主文件。

先删掉 main.dart 里面的全部代码，然后我们快速写一个最简单的结构体，这个界面只包含两部分，头部订单的蓝色 bar 条和屏幕中间区域的内容。

代码如下：

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'),
        ),
      ),
    );
  }
}

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

本文呢算我们上手编写代码的第一节，这个基本的结构很重要，小伙伴们可以多练习几遍，把基本结构记熟练。