「这是我参加11月更文应战的第3天，活动详情检查：2021最终一次更文应战」

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

MaterialApp

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

class MaterialApp extends StatefulWidget

咱们从它的继承关系中能够看到，它继承自一个StatefulWidget，这是一个有状态的Widget，那么它有可能封装了一套便利咱们运用的UI作用； ​

咱们将代码修改如下： ​

Flutter(五)常用部件-MaterialApp
运转工程，显现作用：
Flutter(五)常用部件-MaterialApp
比起之前的显现作用多了两行下划线和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 工程'),
        ),
      ),
    );
  }
}

直接运转项目，检查显现作用：

Flutter(五)常用部件-MaterialApp

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

那么咱们如果将自定义的MyWidget显现在界面上呢？咱们检查一下Scaffold除了appBar是否还有其他特点？ ​

咱们发现Scaffold还有一个body特点，并且它也是一个Widget：final Widget? body;

Flutter(五)常用部件-MaterialApp
咱们将自定义的MyWidget赋值给Scaffold的body特点试试看：

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

运转项目，检查作用：

Flutter(五)常用部件-MaterialApp
自定义的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(),
      ),
    );
  }
}

运转检查作用：

Flutter(五)常用部件-MaterialApp