在Flutter里面一切皆组件，不同于CSS的样式，在Flutter里面，样式的值也基本都是组件。
以下是一个最简单的Flutter项目代码：
代码语言：javascript复制import 'package:flutter/material.dart';
void main(){
runApp(Center(
child: Text(
"你好，Flutter",
textDirection: TextDirection.ltr,
),
));
}实际的项目中一般比较大，为了代码的可维护性，我们会把 runApp() 里的内容单独抽离成一个自定义的组件。
在 Flutter 中自定义组件其实就是一个类，这个类需要继承 StatelessWidget/StatefulWidget。
StatelessWidget 是无状态组件，状态不可变的 widget。
StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变。
代码语言：javascript复制import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 将runApp()里抽离成一个组件
class MyApp extends StatelessWidget{
// 覆写
@override
Widget build(BuildContext context) {
return Center(
child: Text(
"你好，Flutter",
// 文字方向从左向右
textDirection: TextDirection.ltr,
),
);
}
}使用 MaterialApp 和 Scaffold 这两个组件，会看起来更像一个APP。
代码语言：javascript复制import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 将runApp()里抽离成一个组件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar:AppBar(title:Text('Flutter App')),
body:HomeContent(),
),
theme: ThemeData(primarySwatch:Colors.yellow),
);
}
}
// 将Scaffold里面的body也抽离成一个组件
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child:Text(
'你好，Flutter',
textDirection:TextDirection.ltr,
style:TextStyle(
// 字体大小都是double类型，必须有小数
fontSize: 40.0,
// color:Colors.yellow
color:Color.fromRGBO(100, 255, 100, 0.5)
),
)
);
}
} MaterialApp 是一个方便的 Widget，它封装了应用程序实现 Material Design 所需要的 一些 Widget，一般作为顶层 widget 使用。该组件常用的属性如下：
1. home 主页
2. title 标题
3. color 颜色
4. theme 主题
5. routes 路由
Scaffold 是 Material Design 布局结构的基本实现，它提供了用于显示 drawer、 snackbar 和底部 sheet 的 API。该组件主要的属性如下：
1. appBar 显示在界面顶部的一个 AppBar。
2. body 当前界面所显示的主要内容 Widget。
3. drawer 抽屉菜单控件。
以下是在上面代码在模拟器上跑起来的效果：
