Flutter - MaterialApp和Scaffold(使

前面我们说过import material.dart，这个material实际是一种设计风格，里面会有已有的一些组件，设计风格等等，那我们该如何使用呢，答案就是MaterialApp。
来看下面代码:

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Demo')),
        body: Hello(),
      ),
    );
  }
}

home可以看成是你的页面，Scaffold相当于一个脚手架，里面有已经定义好的组件，例如appBar，指的是页面头部，body就是页面头部一下那部分。
上面那段代码显示样子就是:

material.png
我们再来做点小修改:

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('你好'),
        ),
        body: Hello(),
      ),
      theme: ThemeData.dark(), // app主题
    );
  }
}

我们添加了个theme，这个就是用来设置app的主题的，这时候设置主题为dark，显示如图: dark.png

所以我们如果要用一些内置的组件风格啥的，就用MaterialApp和Scaffold吧。

完整代码如下:

import 'package:flutter/material.dart'; //meterial 是一种设计风格

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('你好'),
        ),
        body: Hello(),
      ),
      theme: ThemeData.dark(), // app主题
    );
  }
}

class Hello extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello World',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          color: Colors.yellow, //字体颜色
          fontSize: 50.0, //字体大小，注意flutter里面是double类型
          fontWeight: FontWeight.bold, //字体粗细
          fontStyle: FontStyle.italic, // 斜体显示
          letterSpacing: 10.0, //字体间距
          wordSpacing: 30.0, //词间距
        ),
      ),
    );
  }
}