“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

The few widgets we have used so far are in The Material. Dart, in which Flutter encapsulates other useful components for us;

MaterialApp

In Flutter, runApp recommends returning a MaterialApp, so let’s see what it looks like:

class MaterialApp extends StatefulWidget
Copy the code

We can see from its inheritance relationship that it inherits from a StatefulWidget, which is a StatefulWidget, so it may encapsulate a set of UI effects that are convenient for us to use;

We modify the code as follows:

Operation project, display effect:There are two more lines of underline and than beforedebugIdentity;

Scaffold

​

The Scaffold that we use with the MaterialApp contains the AppBar definition:

We write the following code:

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

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

Run the project directly and view the display effect:

At this point it’s pretty close to the App style we use;

What if we display our custom MyWidget on the interface? Scaffold has other properties besides appBar.

We found thatScaffoldThere is also abodyProperty, and it is also aWidget:final Widget? body; We will customizeMyWidgetAssigned toScaffoldthebodyProperties try:

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

Run the project and view the effect:The custom ofMyWidgetIt’s already on the screen, and we found thatCenterThe widget is not in the middle of the screen, it’s based on its parent widget which isbodyCentered;

In our normal development process of App, the development is generally based on MaterialApp.

The little knowledge Flutter

The debug logo

We found that after we used the MaterialApp, a DEBUG logo appeared in the upper right corner of the App display interface, so how can we hide it?

Since it follows the MaterialApp component, is there any property inside the component that can set whether the debug identifier is displayed or not?

MaterialApp debugShowCheckedModeBanner is control the debug identification of show and hide, we amend the code is as follows:

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

Run to view the effect: