Flutter开发之从Hello World开始

一、Hello World

1.1 hello world的实现

做任何的开发，我们都是从祖传的Hello World开始，那么现在我们的需求来了：

• 在界面中心位置，显示一个Hello World；

import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(Text("Hello World", textDirection: TextDirection.ltr));
}

1.2 代码分析

runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的

void runApp(Widget app) {
  ...省略代码
}

该函数让我们传入一个东西：Widget？
Widget到底什么东西呢？

• 我们学习Flutter，从一开始就可以有一个基本的认识：Flutter中万物皆Widget（万物皆可盘）；
• 在我们iOS或者Android开发中，我们的界面有很多种类的划分：应用（Application）、视图控制器（View Controller）、活动（Activity）、View（视图）、Button（按钮）等等；
• 但是在Flutter中，这些东西都是不同的Widget而已；
• 也就是我们整个应用程序中所看到的内容几乎都是Widget，甚至是内边距的设置，我们也需要使用一个叫Padding的Widget来做；

runApp函数让我们传入的就是一个Widget：

• 但是我们现在没有Widget，怎么办呢？
• 我们可以导入Flutter默认已经给我们提供的Material库，来使用其中的很多内置Widget；

1.3 Material设计风格

material是什么呢？

• material是Google公司推行的一套设计风格，或者叫设计语言、设计规范等；
• 里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；
• 在Flutter中高度集成了Material风格的Widget；
• 在我们的应用中，我们可以直接使用这些Widget来创建我们的应用（后面会用到很多）；

二、完整界面结构

目前我们虽然可以显示HelloWorld，但是我们发现最底部的背景是黑色，并且我们的页面并不够结构化。

• 正常的App页面应该有一定的结构，比如通常都会有导航栏，会有一些背景颜色等

在开发当中，我们并不需要从零去搭建这种结构化的界面，我们可以使用Material库，直接使用其中的一些封装好的组件来完成一些结构的搭建。

import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("CODERWHY"),
        ),
        body: Center(
          child: Text(
            "Hello World",
            textDirection: TextDirection.ltr,
            style: TextStyle(fontSize: 36),
          ),
        ),
      ),
    )
  );
}

在最外层包裹一个MaterialApp

• 这意味着整个应用我们都会采用MaterialApp风格的一些东西，方便我们对应用的设计，并且目前我们使用了其中两个属性；
• title：这个是定义在Android系统中打开多任务切换窗口时显示的标题；（暂时可以不写）
• home：是该应用启动时显示的页面，我们传入了一个Scaffold；

Scaffold是什么呢？

• 翻译过来是脚手架，脚手架的作用就是搭建页面的基本结构；
• 所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；
• Scaffold也有一些属性，比如appBar和body；
• appBar是用于设计导航栏的，我们传入了一个title属性；
• body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；