进入桌面初始化一个项目
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 界面: