Flutter自学Demo制作（1）

写在前面：看完了Dart的语法相关的内容，准备继续学习Flutter。但好多东西只是看的话没有直观的感受，所以准备自学的同时写个小的TodoList Demo来练手。为了避免遗忘，我会把自己学习制作Demo的一些内容进行记录，下面开始正文。

Logo页面（Text和布局的简单应用）

1. StatelessWidget：Logo界面没有涉及到状态改变的东西，所以用这个 。
2. Center：子widget居中显示。
3. Colnum：子widgets纵向排列。
4. Text：文字显示widget。
5. TextStyle：对文字进行颜色字体等设置。
6. Color：使用十六进制数进行标识。其中12位为alpha，34·56·78位为r·g·b。

下面是代码：

import 'package:flutter/material.dart';

class Logo extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            'BOX',
            textDirection: TextDirection.ltr,
            style: TextStyle(
              fontSize: 60,
              color: Color(0xffffff00)
            ),
          ),
          Text(
            'Todo List',
            textDirection: TextDirection.ltr,
          )
        ],
      ),
    );
  }
}

设备调试

我是用mac来写这个demo的，调试是连自己手机进行的调试。

1. 先用XCode打开自己工程里面的XCode工程，配置好一些参数，build到手机上（和我一样的萌新遇到出不了包什么的直接百度，我这里就不额外重复了）。然后手机上添加应用信任。这时候就能看到自己的应用了。
2. 点击编辑器上的热重载按钮就可以启用热重载功能。代码里进行的更改立即能在手机上看到。