import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Center(
            child: Text(
                'hello',
                textDirection: TextDirection.ltr,
                style: TextStyle(
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.yellow,
                ),
            ),
        );
    }
}

将 App 类的build 函数里面的内容独立成 Hello 类：

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Hello();
    }
}

class Hello extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Center(
            child: Text(
                'hello',
                textDirection: TextDirection.ltr,
                style: TextStyle(
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.yellow,
                ),
            ),
        );
    }
}

运行结果和上面并没有什么差异。

接下来就是说我们的今天的主角——MaterialApp。

将 App 类的build 函数使用 MaterialApp Widget，代码如下：

class App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
          home: Hello(),
        );
    }
}

效果也改变了。多了两条横线。

看来 MaterialApp Widget 有自己一套的设计理念，home 属性直接放普通的 Widget 好像没有达到理想的效果。

接下来就是要介绍一下 Scaffold Widget。

官方说他是一个符合 Material 设计的 Widget，那我们试试用他吧。

class App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: Hello(),
          ),
        );
    }
}

先不说有没有达到理想的效果，但是他是真的是正常了。

Scaffold Widget 定义了很多界面的设计，比如 appBar：

Scaffold(
    appBar: AppBar(
        title: Text('Muzico')
    ),
)

AppBar Widget 可以设置阴影，通过 elevation 属性，默认值为4.0，不需要阴影可以设置为0.0。

Scaffold(
    appBar: AppBar(
        title: Text('Muzico'),
        elevation: 0.0,
    ),
)

通过 theme 属性可以改变 MaterialApp 的主题。

MaterialApp(
    theme: ThemeData(
        primaryColor: Colors.orange
    ),
)

最后，完整代码：

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('Muzico'),
              elevation: 0.0,
            ),
            body: Hello(),
          ),
          theme: ThemeData(
            primaryColor: Colors.orange
          ),
        );
    }
}

class Hello extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Center(
            child: Text(
                'hello',
                textDirection: TextDirection.ltr,
                style: TextStyle(
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.yellow,
                ),
            ),
        );
    }
}