MaterialApp class in Flutter

MaterialApp class : MaterialApp হল একটি ফ্লাটারে একটি পূর্বনির্ধারিত ক্লাস। এটি সম্ভবত ফ্লটারের প্রধান বা মূল উপাদান। আমরা Flutter SDK দ্বারা প্রদত্ত অন্যান্য সমস্ত উপাদান এবং উইজেটগুলি অ্যাক্সেস করতে পারি৷

Text widget, Dropdownbutton widget, AppBar widget, Scaffold widget, ListView widget, StatelessWidget, StatefulWidget, IconButton widget, TextField widget, Padding widget, ThemeData widget, etc.

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:

  • action: This property takes in  Map<Type, Action<Intent>> as the object. It controls intent keys.
  • backButtonDispatcher: It decided how to handle the back button.
  • checkerboardRasterCacheImage:  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.
  • localizationsDelegate: This provides a delegate for the locales.
  • navigatorObserver: It takes in GlobalKey<NavigatorState> as the object to generate a key when building a navigator.
  • navigatorObserver: This property holds List<NavigatorObserver> 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.
  • onGeneratRoute: 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 metheod.
  • routeInformationParse: This property holds RouteInformationParser<T> as the object to the routing information from the routeInformationProvider into a generic data type.
  • routeInformationProvider: This property takes in RouteInformationProvider class as the object. It is responsible for providing routing information.
  • routeDelegate: This property takes in RouterDelegate<T>  as the object to configure a given widget.
  • routes: The routes property takes in LogicalKeySet 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.
  • showSemantisDebugger: 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<E> 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.
import 'package:flutter/material.dart';

void main() {
	title: 'BnCodeing',
	theme: ThemeData(
	home: Scaffold(
	appBar: AppBar(

Explanation of code: 

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 main function in which we have to write the statements those are to be executed when the app starts. The return type of 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: I 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 press 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.

Leave a Reply