Flutter MaterialApp Class

Order of routing 

The MaterialApp class directs the top-level Navigator to search for routes in the following order:

1. For the / route, the home property, if non-null, is used.
2. Otherwise, the routes table is used if it has an entry for the route.
3. Else, onGenerateRoute is called, if provided. It should return a non-null value for any valid route not handled by home and routes.
4. In the end, if all else fails, onUnknownRoute is called.

Constructor of MaterialApp class:

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

Properties of MaterialApp widget:

• actions → Map<Type, Action<Intent>>?
  This type of property takes in  Map<Type, Action<Intent>> as the object. It controls intent keys
• checkerboardOffscreenLayers → bool
  it takes in a boolean as the object. If true, the checkerboarding of raster cache images is enabled
• backButtonDispatcher → BackButtonDispatcher?
  It decided how to handle the back button
• color → Color?
  This property controls the primary color used in the application.
• debugShowCheckedModeBanner → bool
  It takes in a boolean as the object to decide whether to show the debug banner or not..
• darkTheme → ThemeData?
  This property provided theme data for the dark theme for the application.
• debugShowMaterialGrid → bool
  It  takes a boolean as the object. If set to true it paints a baseline grid material app.
• title → String
  It takes in a string as the object to decide the one-line description of the app for the device.
• theme → ThemeData?
  It takes in ThemeData class as the object to describe the theme for the MaterialApp.
• themeMode → ThemeMode?
  It holds ThemeMode enum as the object to decide the theme for the material app.
   

Here is a very simple code in dart language to make a screen that has an appBar title as Coding Ninjas.

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    title: 'Coding Ninjas',
    theme: ThemeData(primarySwatch: Colors.orange),
    home: Scaffold(
      appBar: AppBar(title: Text('Coding Ninjas')),
    ),
  ));
}

OUTPUT

Working of code

Importing libraries: The import statement is used to bring in the libraries that come with the flutter SDK. The 'material.dart' file has been imported in the above example. We may use all of the flutter widgets that implement the material design by importing this file.

Main function: We have a main function, similar to many other programming languages, in which we must write the statements that will be executed when the app starts. The main function's return type is void.

runApp function: The void runApp function, which is also called a widget function, accepts a widget as a parameter and places it on the screen. It tells the widget how big it has to be to fit on the screen. It makes the supplied widget the app's root widget and all other widgets its children. The MaterialApp has been utilized as the root widget in which the other widgets have been defined.

title: This property is used to give the user a brief description of the program. When a user presses the recent apps button on their smartphone, the text following the title appears.

theme: This parameter is used to provide the application with a default theme, similar to the theme-color property. we use the inbuilt class/widget named ThemeData() for this. We must write the various properties connected to the theme in the Theme data() widget. We've utilized the primarySwatch to set the application's default theme color. Colors class from the material library was utilized to select the color. TextTheme, Brightness (which can allow a dark theme), AppBarTheme, and many other characteristics can be defined in ThemeData().

home: It is used for the app's default route, which implies that the widget defined in it appears when the app starts properly. Within the home property, we've defined the Scaffold widget. We define properties like appBar, body, floating action button, backgroundColor, and so on inside the Scaffold.

For example, in the appBar property, we utilized the AppBar() widget and gave "code Ninjas" as a title, which will be displayed at the top of the app in the appbar.

FAQs

What is MaterialApp class in flutter?

MaterialApp is a predefined flutter class. Flutter's main or core component is most likely this. We have access to all of Flutter SDK's other components and widgets.

Why do we use MaterialApp in flutter?

MaterialApp is an extension of Flutter's WidgetsApp, a basic top-level widget. WidgetsApp is a convenience widget that abstracts away several elements required for most mobile apps, such as setting up navigation and applying a theme to the entire program.

What is the difference between MaterialApp and scaffold?

MaterialApp is a widget that introduces the Navigator and Theme widgets required to create a material design app. Scaffold Widget is a MaterialApp component that provides numerous fundamental features such as AppBar, BottomNavigationBar, Drawer, FloatingActionButton,etc.

What is Flutter and why it is used?

Flutter is a portable UI toolkit from Google that lets you create attractive natively built apps for mobile, web, and desktop from a single codebase. Flutter is free and open source, and it works with existing code. It is utilised by developers and organisations all over the world.

Is Flutter a programming language?.

Flutter, on the other hand, is not a programming language. It's a prewritten software development kit (SDK) that includes ready-to-use and customisable widgets, as well as libraries, tools, and documentation, all of which help developers create cross-platform apps.

Conclusion

In this article, we have extensively discussed Flutter MaterialApp Class. We hope that this blog has helped you enhance your knowledge regarding  Flutter MaterialApp Class and if you would like to learn more, check out our articles on Flutter Animation Flutter Table and Flutter Tabbar

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. 

Check out this problem - Duplicate Subtree In Binary Tree

Enroll in our courses and refer to the mock test and problems available.

Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow. 

Happy Coding!