MaterialApp class

An application that uses Material Design.

A convenience widget that wraps a number of widgets that are commonly required for Material Design applications. It builds upon a WidgetsApp by adding material-design specific functionality, such as AnimatedTheme and GridPaper.

MaterialApp configures its WidgetsApp.textStyle with an ugly red/yellow text style that's intended to warn the developer that their app hasn't defined a default text style. Typically the app's Scaffold builds a Material widget whose default Material.textStyle defines the text style for the entire scaffold.

The MaterialApp configures the top-level Navigator to search for routes in the following order:

1. For the / route, the home property, if non-null, is used.

2. Otherwise, the routes table is used, if it has an entry for the route.

3. Otherwise, onGenerateRoute is called, if provided. It should return a non-null value for any valid route not handled by home and routes.

4. Finally if all else fails onUnknownRoute is called.

If a Navigator is created, at least one of these options must handle the / route, since it is used when an invalid initialRoute is specified on startup (e.g. by another application launching this one with an intent on Android; see dart:ui.PlatformDispatcher.defaultRouteName).

This widget also configures the observer of the top-level Navigator (if any) to perform Hero animations.

The MaterialApp automatically creates a DefaultSelectionStyle. It uses the colors in the ThemeData.textSelectionTheme if they are not null; otherwise, the MaterialApp sets DefaultSelectionStyle.selectionColor to ColorScheme.primary with 0.4 opacity and DefaultSelectionStyle.cursorColor to ColorScheme.primary.

If home, routes, onGenerateRoute, and onUnknownRoute are all null, and builder is not null, then no Navigator is created.

MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: const Text('Home'),
    ),
  ),
  debugShowCheckedModeBanner: false,
)

MaterialApp(
  routes: <String, WidgetBuilder>{
    '/': (BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Home Route'),
        ),
      );
    },
    '/about': (BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('About Route'),
        ),
      );
     }
   },
)

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.blueGrey
  ),
  home: Scaffold(
    appBar: AppBar(
      title: const Text('MaterialApp Theme'),
    ),
  ),
)

Troubleshooting

Why is my app's text red with yellow underlines?

Text widgets that lack a Material ancestor will be rendered with an ugly red/yellow text style.

The typical fix is to give the widget a Scaffold ancestor. The Scaffold creates a Material widget that defines its default text style.

const MaterialApp(
  title: 'Material App',
  home: Scaffold(
    body: Center(
      child: Text('Hello World'),
    ),
  ),
)

See also:

• Scaffold, which provides standard app elements like an AppBar and a Drawer.
• Navigator, which is used to manage the app's stack of pages.
• MaterialPageRoute, which defines an app page that transitions in a material-specific way.
• WidgetsApp, which defines the basic app elements but does not depend on the material library.
• The Flutter Internationalization Tutorial, flutter.dev/to/internationalization/.