(五)常用部件 MaterialApp

到目前为止，我们使用的几个小部件都是在material.dart中的，其实在它里边Flutter还为我们封装了其他好用的组件；

MaterialApp

在Flutter中，runApp推荐返回一个MaterialApp，那么我们来看一下它是个什么样的部件：

class MaterialApp extends StatefulWidget

我们从它的继承关系中可以看到，它继承自一个StatefulWidget，这是一个有状态的Widget，那么它有可能封装了一套方便我们使用的UI效果； ​

我们将代码修改如下： ​

运行工程，显示效果： 比起之前的显示效果多了两行下划线和debug标识； ​

Scaffold

​

我们在使用MaterialApp的时候，一般配合Scaffold使用，而Scaffold中含有AppBar的定义：

我们编写如下代码：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter 工程'),
        ),
      ),
    );
  }
}

直接运行项目，查看显示效果：

这个时候已经接近于我们常用的App样式了； ​

那么我们如果将自定义的MyWidget显示在界面上呢？我们查看一下Scaffold除了appBar是否还有其他属性？ ​

我们发现Scaffold还有一个body属性，并且它也是一个Widget：final Widget? body; 我们将自定义的MyWidget赋值给Scaffold的body属性试试看：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter 工程'),
        ),
        body: MyWidget(),
      ),
    );
  }
}

运行项目，查看效果： 自定义的MyWidget已经显示在界面上了，而且我们发现Center部件并不是在屏幕正中间，而是基于它的父部件也就是body居中的； ​

我们正常开发App的过程中，一般情况下也是基于MaterialApp来进行开发的；

Flutter 小知识

debug 标识

我们发现，在我们使用了MaterialApp之后，在App显示界面的右上角出现了一个debug的标识，那么如何将其隐藏掉呢？ ​

既然是跟随MaterialApp这个部件出现的，那么在此部件内部是否有属性可以设置debug标识的显示与否呢？ ​

MaterialApp中debugShowCheckedModeBanner就是控制debug标识的显示与隐藏的，我们将代码修改如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter 工程'),
        ),
        body: MyWidget(),
      ),
    );
  }
}

运行查看效果：