初始化 Flutter 项目以及第一个 hello world 程序

进入桌面初始化一个项目

cd desktop
flutter create app

至此项目初始化完毕，可以在桌面看到新建了一个app的文件夹，里面就是flutter的项目目录了。

如下图：

而我们编写代码的开发目录则在 lib 目录下，当我们打开目录下只有一个 main.dart 文件, 在 VScode 里面打开该项目，并且清空 main.dart 重新编写一个 hello world

main.dart 内容如下:

// 引入 flutter UI 库 material
import 'package:flutter/material.dart';

// 默认文件启动函数 main 指向 runapp 函数(),并且在里面调用 MyApp 类
void main() => runApp(MyApp());

// 声明一个 MyApp 类，并且继承与 StatelessWidget 类
class MyApp extends StatelessWidget{
    
    
  // @override 操作符用来重写 Widget build()方法
  @override
  
  /**
   * Widget 代表一个窗口 build 代表建造，表示在窗口新建构造一个界面（暂时这样理解）
   * build 方法 （暂时这样理解）
   * 	第一个参数 BuildContext 代表构建上下文 
   * 	第二个参数 代表内容
   */ 
  Widget build(BuildContext context){
    
    
  	/** 
	* return 返回
	* MaterialApp 界面构造
	* 连贯在一起就是 返回一个界面布局 的意思
	*/
    return MaterialApp(
      // 设置 应用 名称
      title: 'home',
      // 主题风格
      theme: new ThemeData(
        primaryColor: Colors.white, // 这里采用 flutter 的白色主题
      ),
      // 页面设置
      home: Scaffold(
      	// 应用导航栏 设置
        appBar: AppBar(
          title: Text('标题'), // 设置标题文字
        ),
       	// 设置页面内容布局
        body:Center(
          // 子节点 
          child: Text(
            'hello world',
          ),
        )
      )
    );
  }
}

当编写完成后进入打开终端 cd 到项目 app 文件夹运行命令启动模拟器查看

flutter run -d 'iPhone Xʀ'

运行完成后在 ios 模拟器可以看到又一个 app 的应用程序：

点击 app 应用图标打开应用，可以看到我们布局好的 flutter 原生 app 界面：