MaterialApp Widget – Flutter Widget Guide By Flutter Agency

• Flutter
• Flutter Widget Guide

What is MaterialApp Widget?

MaterialApp Widget is a predefined class in a flutter. It is likely the main or core component of flutter. We can access all the other components and widgets provided by Flutter SDK. Text widget, Dropdown button widget, AppBar widget, Scaffold widget, ListView widget, StatelessWidget, StatefulWidget, IconButton widget, TextField widget, Padding widget, ThemeData widget, etc. are the widgets that can be accessed using MaterialApp class. There are many more widgets that are accessed using MaterialApp class. Using this widget, we can make an attractive app.

MaterialApp is even more convenient than WidgetsApp. It adds Material Design specific functionality and styling options to your app. It doesn’t just help set up the Navigator, it does it for you. If you use the Material app widget, you don’t have to worry about implementing the animations that happen when a user navigates between pages. It also allows you to use widgets that are specified in the Material Widget collection, and there are plenty of those.

The constructor of MaterialApp Widget will look like below :

const MaterialApp(
{Key? key,
GlobalKey? navigatorKey,
GlobalKey? scaffoldMessengerKey,
Widget? home,
Map<String, WidgetBuilder> routes = const <String, WidgetBuilder>{},
String? initialRoute,
RouteFactory? onGenerateRoute,
InitialRouteListFactory? onGenerateInitialRoutes,
RouteFactory? onUnknownRoute,
NotificationListenerCallback? onNavigationNotification,
List navigatorObservers = const [],
TransitionBuilder? builder,
String title = '',
GenerateAppTitle? onGenerateTitle,
Color? color,
ThemeData? theme,
ThemeData? darkTheme,
ThemeData? highContrastTheme,
ThemeData? highContrastDarkTheme,
ThemeMode? themeMode = ThemeMode.system,
Duration themeAnimationDuration = kThemeAnimationDuration,
Curve themeAnimationCurve = Curves.linear,
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<ShortcutActivator, Intent>? shortcuts,
Map<Type, Action>? actions,
String? restorationScopeId,
ScrollBehavior? scrollBehavior,
AnimationStyle? themeAnimationStyle}
)

The code snippet will be like below :

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

• title: title property is used to provide a short description of the application to the user. When the user presses the recent apps button in mobile the text proceeded in the title is displayed.

• theme: This property is used to provide the default theme to the application like the theme-color of 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 application. To choose the color we have used Colors class from the material library. In ThemeData() we can also define some other properties like TextTheme, Brightness, 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 app bar property we have used the AppBar() widget in which as a title we have passed ‘Home’ which will be displayed at the top of the application in app bar.

• checkerboardOffscreenLayers: Turns on checkerboarding of layers rendered to offscreen bitmaps.

• checkerboardRasterCacheImages : Turns on checkerboarding of raster cache images.

• color: The primary color to use for the application in the operating system interface.

• darkTheme: The ThemeData to use when a ‘dark mode’ is requested by the system.

• debugShowCheckedModeBanner: Turns on a little “DEBUG” banner in checked mode to indicate that the app is in checked mode. This is on by default (in checked mode), to turn it off, set the constructor argument to false. In release mode, this has no effect.

• initialRoute : The name of the first route to show if a Navigator is built. If the route contains slashes, then it is treated as a “deep link”, and before this route is pushed, the routes leading to this one are pushed also. For example, if the route was /a/b/c, then the app would start with the three routes /a, /a/b, and /a/b/c loaded, in that order.

• localeListResolutionCallback: This callback is responsible for choosing the app’s locale when the app is started, and when the user changes the device’s locale.

• localizationsDelegates: The delegates collectively define all of the localized resources for this application’s Localizations widget.

• supportedLocales: The list of locales that this app has been localized for.

• onGenerateTitle: The onGenerateTitle context parameter includes the WidgetsApp’s Localizations widget so that this callback can be used to produce a localized title.

• themeMode: Determines which theme will be used by the application if both theme and darkTheme are provided.

• theme: Default visual properties, like colors fonts and shapes, for this app’s material widgets.

Thanks for reading !!!
Have a suggestion / Feedback? Do Contact Us !!!

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.