MaterialApp class in Flutter (original) (raw)

Last Updated : 28 Feb, 2025

**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 navigatorKey,
Widget home,
Map<String, WidgetBuilder> routes: const <String, WidgetBuilder>{},
String initialRoute,
RouteFactory onGenerateRoute,
InitialRouteListFactory onGenerateInitialRoutes,
RouteFactory onUnknownRoute,
List navigatorObservers: const [],
TransitionBuilder builder,
String title: '',
GenerateAppTitle onGenerateTitle,
Color color,
ThemeData theme,
ThemeData darkTheme,
ThemeData highContrastTheme,
ThemeData highContrastDarkTheme,
ThemeMode themeMode: ThemeMode.system,
Locale locale,
Iterable localizationsDelegates,
LocaleListResolutionCallback localeListResolutionCallback,
LocaleResolutionCallback localeResolutionCallback,
Iterable supportedLocales: const [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> actions}
)

Property	Description
**actions	This property takes in _Map<Type, Action> as the object. It controls intent keys.
checkerboardRasterCacheImages	This property takes in a boolean as the object. If set to true it turns on the checkerboarding of raster cache images.
**color	It controls the primary color used in the application.
**darkTheme	It provided theme data for the dark theme for the application.
**debugShowCheckedModeBanner	This property takes in a _boolean as the object to decide whether to show the debug banner or not.
**debugShowMaterialGird	This property takes a boolean as the object. If set to true it paints a baseline grid material app.
**highContrastDarkTheme	It provided the theme data to use for the high contrast theme.
**home	This property takes in _widget as the object to show on the default route of the app.
**initialRoute	This property takes in a _string as the object to give the name of the first route in which the navigator is built.
**locale	It provides a locale for the _MaterialApp.
**localizationsDelegates	This provides a delegate for the locales.
**navigatorObservers	This property holds _List as the object to create a list of observers for the navigator.
**onGenerateInitialRoutes	This property takes in _InitialRouteListFactory typedef as the object to generate initial routes.
**onGenerateRoute	The _onGenerateRoute takes in a _RouteFactory as the object. It is used when the app is navigated to a named route.
**onGenerateTitle	This property takes in _RouteFactory typedef as the object to generate a title string for the application if provided.
**onUnknownRoute	The _onUnknownRoute takes in _RouteFactory typedef as the object to provide a route in case of failure in other method.
**routes	The routes property takes in L__ogicalKeySet class as the object to control the app's topmost level routing.
**shortcuts	This property takes in _LogicalKeySet class as the object to decide the keyboard shortcut for the application.
**showPerformanceOverlay	The _showPerformanceOverlay takes in a _boolean value as the object to turn on or off performance overlay.
**showSemanticsDebugger	This property takes in a _boolean as the object. If set to true, it shows some accessible information.
**supportedLocales	The _supportedLocales property keeps hold of the locals used in the app by taking in _Iterable class as the object.
**theme	This property takes in _ThemeData class as the object to describe the theme for the MaterialApp.
**themeMode	This property holds _ThemeMode enum as the object to decide the theme for the material app.
**title	The _title property takes in a _string as the object to decide the one-line description of the app for the device.

**Simple Material App Example:

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

Dart `

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:

Material_App

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