Flutter学习之入门程序HelloWorld

简介

每当我们去学习一个新的语言的时候，就都是从入门的程序开始。比如我们学习 java 那么就是从 System.out.print(“Hello world”) 开始。我们学习 Flutter 也是一样。

准备工作

• 新建一个 flutter 工程，可以参考 创建Flutter工程
• 检查是否启用了material design
  在工程的根目录下的文件：pubspec.yaml 中的找到 uses-material-design并且设置为 true。有注释掉，就放开注释。

最简单的实例

代码

import 'package:flutter/material.dart';

// main 函数为程序的入口函数，类似于 java中的 main函数，只是写法不一样了。
void main() {
  // 通过 runApp 的方法来执行我们的程序
  // runApp 传入的参数，就是我们渲染界面的代码控件了。
  runApp(new Center(child: new Text('你好，世界！', textDirection: TextDirection.ltr)));
}

图示

说明

1. 关于 runApp()

   上面的实例代码中使用了 runApp() 方法，runApp 方法接收的指定参数类型为 Widget，即： runApp(Widget)。在 Flutter 的组件树(widget tree)中，会根据我们在 runApp 方法传入的 Widget 作为整个 App 的 根控件(root widget)。

2. 关于 Widget
   本实例中，控件树(widget tree)包含两个控件：1. Center 控件使其子控件处于中间位置； 2.Text控件打印文本内容。runApp 方法强制将根控件覆盖屏幕，这意味着文本“你好，世界！”将显示在屏幕中心。
   Flutter 布局的机制的核心就是在 widget。控件(Widget) 定义一个元素(Element)的配置，在Flutter框架的层次结构中处于核心层。
   所有的布局 widget 都有一个 child属性(例如：Center 或 Container)， 或者一个children 属性，如果他们需要一个 widget 列表(例如 Row, Column, ListView 或者 Stack) 。

创建一个 material 风格的程序

代码

import 'package:flutter/material.dart';

// main 为程序的入口 通过 runApp() 方法执行我们的 class
void main() => runApp(new MyApp());

/* 创建一个无状态的 Widget */
class MyApp extends StatelessWidget {

 /*查看源码也可以知道 StatelessWidget 是一个抽象类，
     由于我们是自定义的 StatelessWidget 所以需要复写 build 方法*/

  @override
  Widget build(BuildContext context) {

    // 创建一个 material 风格的 app
    return new MaterialApp(
      title: 'Demo',    // 设置 App 的标题
      theme: new ThemeData(primaryColor: Colors.blue),  // 设置主题颜色

      // Scaffold 存在于 Material 库中。实现了基本的 material 布局。
      // 可以使用 scaffold 实现比较复杂的布局，可以先简单理解 scaffold 为一个容器，可以在上面实现布局
      home: new Scaffold(
        body: new Center(
          child: new Text('hello world'),
        ),
      ),
    );
  }
}

图示

说明
上面的例子在代码上面注释写的比较全，可以仔细看看。在这个例子中，我们使用的是 MaterialApp。从源码上可以看到 MyApp 所返回的就是一个 Scaffold。也就是说， MaterialApp 的 child 是 Scaffold Widget。对于 “无状态的Widget” 可以参看 添加应用程序交互