MaterialApp Widget in Flutter
4 min readApr 21, 2021
Below is a deep dive to MaterialApp widget in flutter .Will have a look on how it is used its properties and how it is coded.
lets talk widget lets do widget
MaterialApp Widget
MaterialApp widget is a predefined class in flutter that add the material design functionality and styling to the app .It introduces one to other components and widgets offered by the Flutter SDK such as Text widget ,Scaffold widget , Stateless widget , Stateful widget and AppBar to mention a few.
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}
)Read more on the MaterialApp class constructor on flutter docs
Primary properties of a MaterialApp widget
MaterialApp has so many argument on its constructor but i will only have to discuss the primary ones.
- routes: The routes property takes in LogicalKeySet class as the object to control the app’s topmost level routing.
- title : The title property takes in a string as the object to decide the one-line description of the app for the device.
- themeMode: This property holds ThemeMode enum as the object to decide the theme for the material app.
- theme: This property takes in ThemeData class as the object to describe the theme for the MaterialApp
- home : This property takes in widget as the object to show on the default route of the app
- debugShowMaterialGrid: This property takes a boolean as the object. If set to true it paints a baseline grid material app
- debugShowCheckedModeBanner : This property takes in a boolean as the object to decide whether to show the debug banner or not.
- showPerformanceOverlay : The showPerformanceOverlay takes in a boolean value as the object to turn on or off performance overlay.
Explanation of the code
- import statement : is used to import libraries that are provided by the flutter SDK .Here we’ve imported the “material.dart” file that helps use use all flutter widgets that implement the material design.
- main () function : main function is executed when the app starts and the return type of the main function is “void”.
- runApp( Widget widget) function :the runApp function takes a widget as its argument and sets it on the screen. its makes the given widget as the root widgets and for our case the MaterialApp widget is defined as the root widget.
- MaterialApp() widget: introduces the material designs in the app.
- title: title property provides a short description of the app to the user. When the user presses the recent apps button the title is displayed.
- theme : this property provides the default theme to the app .We use the ThemeData() widget to write different properties related to the theme .ThemeData() can be used to define primary color of the app by using the PrimarySwatch property and the Colors class to choose the color. ThemeData() can also be used to define properties like TextTheme , Brightness , AppBarTheme and many more.
- home : defines the default route of the app, the widget that will be displayed when the app launches .Here we’ve defined the Scaffold widget inside the home property. Inside the Scaffold we define various properties like appBar, body, floatingActionButton , background Color, etc.
For example in the appBar property we have used the AppBar() widget in which as a title we have passed ‘Widget Talk’ which will be displayed at the top of the application in appBar. - debugShowModeBanner :used to remove the debug tag at top corner
Output
Next topic is Scaffold widget
For more updates follow muchoki-ben and check out widgetTalk
websites to visit to learn more on materialApp widget.
https://api.flutter.dev/flutter/material/MaterialApp/MaterialApp.html
flutter writers ;
