MaterialApp class in Flutter

MaterialApp Class: MaterialApp is a predefined class or widget in flutter. It is likely the main or core component of a flutter app. The MaterialApp widget provides a wrapper around other Material Widgets. We can access all the other components and widgets provided by Flutter SDK like Text widget, DropdownButton widget, AppBar widget, Scaffold widget, ListView widget, StatelessWidget, StatefulWidget, IconButton widget, TextField widget, Padding widget, ThemeData widget, and many more. Using this widget, we can make an attractive app that follows the Material Design guidelines. 

Here is the constructor of the MaterialApp class

Constructor of MaterialApp class

const MaterialApp(
{
     Key key,
     GlobalKey<NavigatorState> navigatorKey,
     Widget home,
     Map<String, WidgetBuilder> routes: const <String, WidgetBuilder>{},
     String initialRoute,
     RouteFactory onGenerateRoute,
     InitialRouteListFactory onGenerateInitialRoutes,
     RouteFactory onUnknownRoute,
     List<NavigatorObserver> navigatorObservers: const <NavigatorObserver>[],
     TransitionBuilder builder,
     String title: '',
     GenerateAppTitle onGenerateTitle,
     Color color,
     ThemeData theme,
     ThemeData darkTheme,
     ThemeData highContrastTheme,
     ThemeData highContrastDarkTheme,
     ThemeMode themeMode: ThemeMode.system,
     Locale locale,
     Iterable<LocalizationsDelegate> localizationsDelegates,
     LocaleListResolutionCallback localeListResolutionCallback,
     LocaleResolutionCallback localeResolutionCallback,
     Iterable<Locale> supportedLocales: const <Locale>[Locale('en', 'US')],
     bool debugShowMaterialGrid: false,
     bool showPerformanceOverlay: false,
     bool checkerboardRasterCacheImages: false,
     bool checkerboardOffscreenLayers: false,
     bool showSemanticsDebugger: false,
     bool debugShowCheckedModeBanner: true,
     Map<LogicalKeySet, Intent> shortcuts,
     Map<Type, Action<Intent>> actions}
)

Properties of MaterialApp widget

Simple Material App Example:

Here is very simple code in dart language to make a screen that has an AppBar title as GeeksforGeeks.

import 'package:flutter/material.dart';

// The main function is the entry point of the application
void main() {
  runApp(const GFGapp());
}

// GFGapp is a stateless widget that represents the application
class GFGapp extends StatelessWidget {
  const GFGapp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Title of the application
      title: 'GeeksforGeeks',
      // Theme of the application
      theme: ThemeData(primarySwatch: Colors.green),
      // Dark theme of the application
      darkTheme: ThemeData(primarySwatch: Colors.grey),
      // Color of the application
      color: Colors.amberAccent,
      // Supported locales for the application
      supportedLocales: {const Locale('en', ' ')},
      // Disable the debug banner
      debugShowCheckedModeBanner: false,

      // Home screen of the application
      home: Scaffold(
        appBar: AppBar(
          // Title of the app bar
          title: const Text('GeeksforGeeks'),
          // Background color of the app bar
          backgroundColor: Colors.green,
        ),
      ),
    );
  }
}

Output:

• Here we can see that the text defined in the title of the AppBar is displayed at the top.
• The default theme color is green as we defined.
• runApp() calls the widget GFGapp that returns the MaterialApp widget which specifies theme, localization, title, home widget and more.

Output explanation: 

• import statement: The import statement is used to import the libraries that are provided by the flutter SDK. Here we have imported the 'material.dart' file. We can use all the flutter widgets that implement the material design by importing this file.
• main() function: Like many other programming languages, we also have a main function in which we have to write the statements that are to be executed when the app starts. The return type of the main function is 'void'.
• runApp(Widget widget) function: The void runApp(Widget widget) takes a widget as an argument and sets it on a screen. It gives the constraints to the widget to fit into the screen. It makes the given widget the root widget of the app and other widgets as the child of it. Here we have used the MaterialApp as a root widget in which we have defined the other widgets.
• MaterialApp() widget: We have discussed MaterialApp in the beginning. Let us have a look at the different properties of the MaterialApp widget. 
  • title: This property is used to provide a short description of the application to the user. When the user presses the recent apps button on mobile the text proceeded in title is displayed. 
  • theme: This property is used to provide the default theme to the application like the theme color of the application.
    For this, we use the inbuilt class/widget named ThemeData(). In ThemeData() widget we have to write the different properties related to the theme. Here we have used the primarySwatch which is used to define the default themecolor of the application. To choose the color we used Colors class from the material library. In ThemeData() we can also define some other properties like textTheme, brightness(Can enable dark theme by this), appBarTheme, and many more.
  • home: It is used for the default route of the app means the widget defined in it is displayed when the application starts normally. Here we have defined the Scaffold widget inside the home property. Inside the Scaffold we define various properties like appBar, body, floatingActionButton, backgroundColor, etc..
    For example, in the appBar property we have used the AppBar() widget which accepts 'GeeksforGeeks' as the title, this will be displayed at the top of the application in appbar.
  • The other properties in MaterialApp() are debugShowCheckedModeBanner (used to remove the debug tag at the top corner), darkTheme (To request dark mode in application), color (For the primary color of application), routes (For routing table of application), ThemeMode (To determine which theme to be used) and supportedLocales contains a list of languages the app supports, etc.

Conclusion

In this article we looked at MaterialApp widget. It directly and indirectly wraps all other Material widgets such as Scaffold, AppBar, Drawer, etc. You can create an app with Material Design Specifications using the MaterialApp widget. We also looked at the constructor and properties of the MaterialApp widget in order to understand what we can achieve using the MaterialApp widget in Flutter.