Let's Talk about the MaterialApp Widget

Hey Readers 🙂,

I know it's been 6 days since the last blog. I got caught in the Procrastination purgatory so today I finally decided that I am gonna write a blog about something so picked the widget which we use in almost every application we create using the flutter that is MaterialApp. So let's get started...

Introduction of MaterialApp widget

we the MaterialApp widget in an application that uses material design.

A convenience widget that wraps a number of widgets that are commonly required for material design applications. It builds upon a WidgetsApp by adding material-design specific functionality, such as AnimatedTheme and GridPaper.

means that this widget is used to wrap multiple widgets which collectively used to build the UI which we required in material design. Let's analyse the MaterialApp constructor so we can get some insights on how this works.

const MaterialApp(
{
Widget? home,
Color? color,
ThemeData? theme,
ThemeData? darkTheme,
ThemeData? highContrastTheme,
ThemeData? highContrastDarkTheme,
ThemeMode? themeMode: ThemeMode.system,
bool debugShowMaterialGrid: false,
bool showPerformanceOverlay: false,
bool debugShowCheckedModeBanner: true,}
)

There are many more arguments inside the MaterialApp widget but I have only kept the arguments which I have used till now 😔.

At least one of home, routes, onGenerateRoute, or builder must be non-null. If only routes are given, it must include an entry for the Navigator.defaultRouteName (/), since that is the route used when the application is launched with an intent that specifies an otherwise unsupported route.
This class creates an instance of WidgetsApp.
The boolean arguments, routes, and navigatorObservers, must not be null.

Due to the named parameters feature of the Dart, we can only require the rest of the arguments will be set to their default values so we don't have to worry about them. (pretty cool huh 😎)

So the first one Widget home gives us the place to place all the widgets we are going to use for creating the UI of the app. we are going to place all the child widget inside this argument so this the center of the attraction of this widget.

the Color argument is used for The primary colour to use for the application in the operating system interface.

All the theme-related arguments are used for setting the theme to the app such as dark theme, high contrast theme etc. which controls the Default visual properties, like colours fonts and shapes, for the app's material widgets.

debugShowMaterialGrid displays the grid to which will helps us in setting the container values such as padding, margin etc. also helps in widgets placement when we are displaying them at the same time.

showPerformanceOverlay displays the apps performance overlay which helps in understanding the app's performance which is used when we are performing so performance-related debugging.

debugShowCheckedModeBanner which is used to display debug banner at the top left corner of the screen which is used mark the debug app to differentiate from the release app.

Example Time

So let's try some example since a single example helps us more than tons of explanations.

This example shows how to create a MaterialApp that disables the "debug" banner with a home route that will be displayed when the app is launched.

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

This code will result in sample app like this:

now let's try changing theme of the above app to dark theme.

MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Example'),
        ),
      ),
      theme: ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.blueGrey,
      ),
      debugShowCheckedModeBanner: false,
 );

Thank You

I know it's a crude blog but I will update it later on as learn more about the options offered by this widget. 😔

Initially, I thought of writing about both MaterialApp and Scaffold but as I started to write about it I understood that I know nothing about it there are so many options offered from those to so only written about the MaterialApp widget 😣

Still, If you have completely read the blog thanks for that. As usual, if there are any mistakes or wrong information then do let me know in the comments so I can correct myself and repair the mistake 😁.

tot ziens 👋