哈罗，沃德
精彩内容点击上方关注南京Android部落
系列：《Flutter从入门到放弃》
开发环境：Mac os + Android Studio
本文将花费您5分钟左右的时间，一口气看完效果更佳哦
背景
鲍勃是一家互联网公司的移动开发工程师，一直想学习一门新的技术。可是现在每天面对各种新技术，一时间鲍勃也不清楚学个什么新技术比较好。人工智能、机器学习、区块链各种高大上的概念在朋友圈刷的铺天盖地，但是这些技术离现在正在做的工作相差的还是挺大的。偶然间，在一个技术交流群里看到一个叫弗拉德的教授在推广Flutter，说这玩意是跨平台的，并且拥有原生页面一样的交互体验，巴拉~巴拉~弗拉德在群里一顿胡吹。鲍勃按奈不住诱惑，就上网仔细查了下Flutter并跑了个小Demo体验了一下。
几日后下午，偶然和弗拉德在街角的咖啡店相遇：
入坑
鲍勃：“哎呦~弗老师~Flutter可以啊！” （鲍勃欣喜的叫道）
弗拉德：“小鲍啊，体验过了感受如何啊？” （弗拉德淡定的回道）
鲍勃：“我体验了下那个开源项目gitme，真的蛮不错的，我也想学，能不能指导指导我啊？”
弗拉德：“嗯！~老夫看在你天资还不错，就免费教授与你吧”
鲍勃：“多谢弗教授[手动抱拳]”
这就算拜师成功啦！
弗拉德：”来吧，hello world 走起吧！“
鲍勃：“弗老师啊，前几天我已经建了一个空的工程了，但是就是不知道从哪开始下手”
弗拉德：“不错嘛，环境搭的挺快嘛！好吧，打开你的项目”
鲍勃：“已经打开了” （鲍勃已经迫不及待了）
弗拉德：“找到lib-main.dart文件并打开”
图片位置1
鲍勃：“打开了，然后呢”
弗拉德：“年轻人，别这么猴急嘛。接下来把下面这段代码替换进去”
1import 'package:flutter/material.dart';
2
3void main() {
4 runApp(
5 new Center(
6 child: new Text(
7 'Hello, world!',
8 textDirection: TextDirection.ltr,
9 ),
10 ),
11 );
12}
鲍勃：“弗老师啊，替换是替换了，可是代码看不懂啊”
弗拉德：“别急嘛，听我跟你慢慢讲来”
“第一行呢，是引入material风格的widgets”
"第三行呢，就是我们熟悉的main函数了"
“第四行runApp方法接受一个widget，用来作为根widget的，与我们开发原生Android应用时用的setContentView有点像”
“第五行呢，实例化了一个Center的widget作为参数传给runApp方法，center控件的作用是让其子控件都居中显示。首先我们要有一个概念，在Flutter中几乎所有东西都可以称为一个widget（可以理解为一个控件）。现在你暂时有个印象就可以了，不用深究，以后呢我们会详细的讲这块”
鲍勃：“哦。。”（鲍勃眉头紧锁,似懂非懂）
弗拉德：“同理啊，第六行是实例化了一个Text控件放入Center控件中，组合起来的意思就是text显示的内容在Center控件的中间
鲍勃：“哦！我明白了，因为Center控件是整个APP的根控件，代表整个屏幕，所以text在center控件的中间显示也就应该显示在整个屏幕的正中间”
弗拉德：“小子还是有点悟性的嘛，理解的不错。今天我先讲到这，你有个基础的概念就行。后面呢，我会通过相对更复杂的UI来让你对widget有更进一步的理解”
鲍勃：“多谢弗老师的指点，我请您喝杯咖啡”
小结
runApp函数接受指定的控件(Widget)，并使其作为控件树(widget tree)的根控件。控件(Widget)定义一个元素(Element)的配置，在Flutter框架的层次结构中处于核心层。本实例中，控件树(widget tree)包含两个控件，Center控件使其子控件处于中间位置，Text控件打印文本内容。runApp函数强制将根控件覆盖屏幕，这意味着文本“hello，world”将显示在屏幕中心。