dart hello world

---

工作文件夹 如 f:\flutter
创建flutter项目的命令

flutter create myapp

创建一个 名叫 myapp 的 flutter项目
Running "flutter pub get" in myapp...                               6.5s
Wrote 68 files.
All done!
Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.5, on
    Microsoft Windows [Version 6.1.7601], locale zh-CN)
[!] Android toolchain - develop for Android devices: is partially installed;
    more components are available. (Android SDK version 28.0.3)
Android Studio: is fully installed. (version 3.0)
[!] Connected device: is not available.
Run "flutter doctor" for information about installing additional components.
In order to run your application, type:

$ cd myapp
$ flutter run

Your application code is in myapp\lib\main.dart.
等待项目创建完成……
项目会被分为 3部分执行：
create 部分 创建所需的文件结构、文件、代码以及编辑器所需配置信息
68个文件
文件部分创建完成后会执行 flutter pub get 命令来更新所需依赖
依赖更新完成后 会执行检查开发环境 检查完成后提示 cd myapp & flutter run 来运行你的应用
创建 flutter 项目完成
项目结构
F:\flutter\myapp
.dart_tool
.idea
android
ios
lib
test
.gitignore
.metadata
.packages
myapp.iml
pubspec.lock
pubspec.yaml
README.md

---

// 引入 Material Design 设计语言（基于 Dart 的 flutter 版本）
import 'package:flutter/material.dart';
基于 Dart 的 flutter 版本 Material Design 设计语言
Material Design 是由 Google 推出的全新的设计语言
谷歌表示这种设计语言旨在为手机、平板电脑、台式机和“其他平台”
提供更一致、更广泛的“外观和感觉”
// 每个应用都需要有个顶级的 main() 入口函数才能执行
// main() 函数的返回值为 void
void main() => runApp(new MyApp());
main 是 dart 的顶级函数 也是入口
箭头函数
和 JavaScript 的箭头函数不太一样
没理解Dart语法时不要使用高级的用法
void main() {
  runApp(new MyApp());
}
runApp 的函数 是 flutter 的入口函数
必须调用 runApp 才能启动 flutter 项目
runApp 函数仅接受一个叫 Widget 的参数
Flutter Widget 采用现代响应式框架构建
是React的灵感 中心思想是用widget构建你的UI
Widget描述了视图在给定其当前配置和状态时应该看起来像什么
widget状态发生变化时 widget会重新构建UI
Flutter会对比前后变化的不同  以确定底层渲染树
从一个状态转换到下一个状态所需的最小更改
类似于React/Vue中虚拟DOM的diff算法

---

Widget 框架的内容 //flutterchina.club/widgets/
了解了 main、runApp、Widget 之后
void main() {
  runApp(
    Center( // 居中
      child: Text( // 文字对象
        'Hello World!', // 文字内容
        textDirection: TextDirection.ltr, // 文字输出方向
// textDirection 在使用虚拟设备时需要写明 不然无法编译通过
// 使用真实设备 或 Material 时无需写明文本方向 均会自动处理
      ),
    ),
  );
}
启动项目后就可以看到
无 material 的 hello world

---

MyApp 的类
MyApp 它继承自 StatelessWidget
widget是无状态的StatelessWidget
或是有状态的StatefulWidget  具体的选择取决于widget是否需要管理一些状态
widget的主要工作是实现一个build函数 用以构建自身
换句话说 StatelessWidget 和 StatefulWidget
都是 Widget 的抽象类
唯一不同的是
StatelessWidget 是无状态的 无法通过数据变更而更新
StatefulWidget 是有状态的 可以通过数据变更而更新 需要通过setState 来管理状态
由于 StatelessWidget 和 StatefulWidget 都是 Widget 的抽象类
使用的时候需要重写 Widget 类来实现具体的代码和逻辑
重写 Widget 时 要用@override 来装饰需要重写的部分
@override 装饰关键字
// 继承自 StatelessWidget
class MyApp extends StatelessWidget {
  @override // 重写 Widget 类实现
  Widget build(BuildContext context) {
  // Widget 实现构建 build 函数
    // TODO: implement build
    return MaterialApp();
  }
}
保存之后 在控制台中按下 r 键
看到效果了 一个红彤彤的的错误警告信息

---

错误警告信息 MaterialApp
MaterialApp 的源码部分
If [home], [routes], [onGenerateRoute],
and [onUnknownRoute] are all null,
and [builder] is not null,
then no [Navigator] is created.
如果 [home], [routes], [onGenerateRoute] 和 [onUnknownRoute] 都
为 null 并且 [builder] 不为 null 那么将不会创建 [Navigator]

---

Creates a MaterialApp.
At least one of [home], [routes], [onGenerateRoute],
or [builder] must be non-null.
创建 MaterialApp
[home] [routes] [onGenerateRoute]
或 [builder] 中的至少一个必须为非 null
最简单的 [home] 将代码修改为：
// 继承自 StatelessWidget
class MyApp extends StatelessWidget {
  // 重写 Widget 类实现
  @override
  // Widget 实现构建 build 函数
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // 实现 home 函数
      home: Center( // 居中
        child: Text('hello world')\, // 文字内容
      ),
    );
  }
}
保存代码 然后 R 一下
对代码的渲染结构进行了更改 所以需要使用 R

---

使用 material 的 hello world
使用主题
用 Scaffold 来实现了 home 函数
Scaffold 部分源码
Creates a visual scaffold for material design widgets.
为“质感设计”部件创建一个可视化的支架
Material 是设计规范（标准）
Scaffold 是实现了设计规范的可视化支架（标准实现）
Widgets 是 UI 框架 但实现了更具体的一些的对象 例如文本框（Text） 行（Row） 列（Colum）等（具体实现）
只要 Widget 提供了所需的内容给Scaffold
那么 Scaffold 就会实现为对应的设计标准 Material
最终的代码和运行结果
import 'package:flutter/material.dart';
void main() {
  runApp (MyApp());
}
// 继承自 StatelessWidget
class MyApp extends StatelessWidget {
  // 重写 Widget 类实现
  @override
  // Widget 实现构建 build 函数
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold( // 使用 Scaffold 实现 home 函数
        // 导航栏（顶部）显示文字
        appBar: AppBar( // 导航栏（顶部）
          title: Text('Welcome to Flutter'), // 文字内容
        ), 
        // Scaffold 的容器 body
        body: Center( // 在容器中居中显示文字
          child: Text('Hello World'),
        ),
      ),
    );
  }
}