Flutter开发之Hello World

一、创建项目
flutter项目的创建有两种方式：通过命令行创建和开发工具创建。
1、命令行创建：

flutter create xxx

注意：Flutter的名称不要包含特殊的字符，另外不可以使用驼峰标识
2、开发工具创建，比如使用Android Studio创建，选择 Start a new Flutter project

二. 开始Flutter代码
2.1. Hello World
2.1.1. Hello World的需求
做任何的开发，我们都是从祖传的Hello World开始，那么现在我们的需求来了：
在界面中心位置，显示一个Hello World；
2.1.2. Hello World的实现
下面，我们就动手开始编写Hello World：

import 'package:flutter/material.dart';
main(List args) {
  runApp(Text("Hello World", textDirection: TextDirection.ltr));
}

当然，上面的代码我们已经实现了在界面上显示Hello World：
但是没有居中，字体也有点小，这个放到后面解决；我们首先要搞明白上面的几行代码。
我们知道Dart程序的入口都是main函数，而Flutter是Dart编写的，所以入口也是main函数；
但是我们导入的Material是什么呢？
另外，我们在main函数中调用了一个runApp()函数又是什么呢？
2.2. 代码分析
2.2.1. runApp和Widget
runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的
我们可以点到runApp的源码，查看到该函数

*widget可以翻译成部件或者组件等，大致的意思就是给定一个widget让其铺满整个程序作为根组件（有点类似于iOS中的window），如果我们希望这个部件从屏幕的一侧对齐，考虑使用"Align"这个组件，如果希望组件居中，可以使用"center"组件。*我们学习Flutter，从一开始就可以有一个基本的认识：Flutter中万物皆Widget。
在我们iOS或者Android开发中，我们的界面有很多种类的划分：应用（Application）、视图控制器（View Controller）、活动（Activity）、View（视图）、Button（按钮）等等；但是在Flutter中，这些东西都是不同的Widget而已；也就是我们整个应用程序中所看到的内容几乎都是Widget，甚至是内边距的设置，我们也需要使用一个叫Padding的Widget来做；
runApp函数让我们传入的就是一个Widget。我们可以导入Flutter默认已经给我们提供的Material库，来使用其中的很多内置Widget。

2.2.2. Material设计风格
material是什么呢？
material是Google公司推行的一套设计风格，或者叫设计语言、设计规范等；
里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；

在Flutter中高度集成了Material风格的Widget；
在我们的应用中，我们可以直接使用这些Widget来创建我们的应用。
Text小部件分析：

我们可以使用Text小部件来完成文字的显示；
我们发现Text小部件继承自StatelessWidget，StatelessWidget继承自Widget；
所以我们可以将Text小部件传入到runApp函数中
属性非常多，但是我们已经学习了Dart语法，所以你会发现只有this.data属性是必须传入的。

class Text extends StatelessWidget {
  const Text(
    this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
  });
}

StatelessWidget简单介绍：
StatelessWidget继承自Widget；
后面我会更加详细的介绍它的用法；
abstract class StatelessWidget extends Widget {
// …省略代码
}
2.3. 代码改进

import 'package:flutter/material.dart';
main(List args) {
  runApp(
    Center(
      child: Text(
        "Hello World",
        textDirection: TextDirection.ltr,
        style: TextStyle(fontSize: 36),
      ),
    )
  );
}

我们在Text小部件外层包装了一个Center部件，让Text作为其child；并且，我们给Text组件设置了一个属性：style，对应的值是TextStyle类型；

2.3.2. 改进界面结构
目前我们虽然可以显示HelloWorld，但是我们发现最底部的背景是黑色，并且我们的页面并不够结构化。
正常的App页面应该有一定的结构，比如通常都会有导航栏，会有一些背景颜色等
在开发当中，我们并不需要从零去搭建这种结构化的界面，我们可以使用Material库，直接使用其中的一些封装好的组件来完成一些结构的搭建。
我们通过下面的代码来实现：

import 'package:flutter/material.dart';

main(List 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；

class Scaffold extends StatefulWidget {
  /// Creates a visual scaffold for material design widgets.
  const Scaffold({
    Key key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.endDrawer,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomPadding,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
    this.drawerEnableOpenDragGesture = true,
    this.endDrawerEnableOpenDragGesture = true,
  }) : assert(primary != null),
       assert(extendBody != null),
       assert(extendBodyBehindAppBar != null),
       assert(drawerDragStartBehavior != null),
       super(key: key);

Scaffold也有一些属性，比如appBar和body：appBar是用于设计导航栏的，我们传入了一个title属性；body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget。