我们看下如果去掉会怎样？
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center(), ); } }
所以说 Scaffold 这个 Widget 不能直接返回，我们需要给它外面套一层 MaterialApp。
可以看下这个链接：https://github.com/nesger/FlutterNote/issues/4
我们返回之前的状态，然后给他加一个 Hello World，看下怎样？
我们知道，Flutter 一切皆 Widget，所以需要显示 Hello World，就需要 Widget。
Widget 可以通过这个链接查看：https://flutter.io/docs/development/ui/widgets
可以看到 Text 这个 Widget
点击进入
再点击进入，可以看到介绍以及 Sample。
大家以后如果要看其他 Widget 也可以按照同样的方式学习。
当然如果时间要求比较紧的话，大家学完博客可以直接在搜索引擎输入关键字看下别人的 Sample，然后化用一下就没问题啦。
我们点击右边复制，然后简单修改如下：
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Text( 'Hello World!', textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold), ), ), ), ); } }可以看到我们将其放到 Center 这个 Widget 里面，表示居中，同时作为它的一个 child。
大家可以试下去掉 Center 会怎样，直接将 Text 作为 body，如下：
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Text( 'Hello World!', textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold), ), ), ); } }可以想象应该是不居中的。
到了这里你应该可以发现，我们整个页面其实是 body 对应的 Widget 来控制的。
上面我们的例子都是 MaterialApp，是不是一定只能这个 Widget 在最外层？
不是的，只是这里 Scaffold 跟它配对而已，我们可以修改如下：
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold), ), ); } }注意多了一行textDirection: TextDirection.ltr,没有会报错。
3. 以 Text 为例子初窥 Widget 写法我们点进去 Text 源码看下，
对比一下上面我们的代码：
Text( 'Hello, world!', textDirection: TextDirection.ltr, textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold), )我们可以这样认为，括号里面的是待传入参数。其中没有花括号{}包裹的是必填项，有花括号{}的是选填项。
有花括号{}的在传入参数时需要指定参数，格式为参数:值。不同参数之间逗号分隔。
所以我们可以猜测上面 Center 下面的 child 应该是在花括号里面。所以才会有上面的写法，我们跟进去源码看看。
确实跟我们猜的一样。而且由于参数的类型是 Widget，所以可以传 Text 也是没问题的。
所以到这里你再回顾一下上面是不是就知道上面代码的写法了呢？
总结由于 Flutter UI 内容比较多，讲起来篇幅会比较大。
所以我们会拆分成几篇文章进行讲解。
回顾一下，本篇文章主要讲解如下内容：
dart sdk 配置和 dart 源代码括号后面编译器提示的显示和隐藏。
通过 main.dart 的修改初步熟悉 Flutter 界面的写法。
通过 Text 说明如何在官方文档上面查找控件和对应 Sample。
通过一个具体的小控件 Text 初窥 Flutter Widget 的写法和使用方法。
小彩蛋这个彩蛋是微信群里一个小伙伴说到的。这里分享给大家。
简单说就是设置 Android Studio 的背景图。
先上图
大家觉得哪种更加赏心悦目呢？
可以根据自己的喜好确定是否设置。
设置方法为