MaterialApp class in Flutter

MaterialApp Class: MaterialApp is a predefined class or widget in a flutter. It is likely the

main or core component of a flutter app. The MaterialApp widget provides a wrapper
around other Material Widgets. We can access all the other components and widgets
provided by Flutter SDK. Text
widget, DropdownButton widget, AppBar widget, Scaffold widget, ListView widget, Stateless
Widget, 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 that follows the Material Design guidelines.

Here is the constructor of the MaterialApp class:

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:

Property Description

This property takes in Map<Type,

Action<Intent>> as the object. It controls
action intent keys.

backButtonDispatcher It decided how to handle the back button.

This property takes in a boolean as the

object. If set to true it turns on the
checkerboardRasterCacheImage checkerboarding of raster cache images.
Property Description

It controls the primary color used in the

color application.

It provided theme data for the dark theme

darkTheme for the application.

This property takes in a boolean as the

object to decide whether to show the debug
debugShowCheckedModeBanner banner or not.

This property takes a boolean as the object.

If set to true it paints a baseline grid
debugShowMaterialGird material app.

It provided the theme data to use for the

highContrastDarkTheme high contrast theme.

This property takes in widget as the object

home to show on the default route of the app.

This property takes in a string as the object

to give the name of the first route in which
initialRoute 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
Property Description

navigator.

This property
holds List<NavigatorObserver> as the object
navigatorObserver to create a list of observers for the navigator.

This property takes in InitialRouteListFactory

typedef as the object to generate initial
onGenerateInitialRoutes routes.

The onGenerateRoute takes in

a RouteFactory as the object. It is used
onGeneratRoute when the app is navigated to a named route.

This property takes in RouteFactory

typedef as the object to generate a title
onGenerateTitle string for the application if provided.

The onUnknownRoute takes in RouteFactory

typedef as the object to provide a route in
onUnknownRoute case of failure in other method.

This property
holds RouteInformationParser<T> as the
object to the routing information from the
routeInformationProvider into a generic
routeInformationParse data type.

This property takes

in RouteInformationProvider class as the
object. It is responsible for providing routing
routeInformationProvider information.
Property Description

This property takes

in RouterDelegate<T> as the object to
routeDelegate configure a given widget.

The routes property takes in

LogicalKeySet class as the object to control
routes the app’s topmost level routing.

This property takes in LogicalKeySet class as

the object to decide the keyboard shortcut
shortcuts for the application.

The showPerformanceOverlay takes in

a boolean value as the object to turn on or
showPerformanceOverlay off performance overlay.

This property takes in a boolean as the

object. If set to true, it shows some
showSemantisDebugger accessible information.

The supportedLocales property keeps hold

of the locals used in the app by taking
supportedLocales in Iterable<E> class as the object.

This property takes in ThemeData class as

the object to describe the theme for the
theme MaterialApp.

This property holds ThemeMode enum as

the object to decide the theme for the
themeMode material app.
Property Description

The title property takes in a string as the

object to decide the one-line description of
title the app for the device.

Drawer Widget in Flutter

Last Updated : 20 Dec, 2022

Drawer widget is used to provide access to different destinations and functionalities

provided in your application. It is represented by three horizontal parallel lines on the upper
end of the scaffold. It has a horizontal movement from the edge of the Scaffold that
navigates the link to different routes in the flutter app.

In order to use the app drawer you need to import the material component package that is ”
package: flutter/material.dart.”

The Navigating AppDrawer is divided into three sections namely header, body, and footer.
The idea is about having a navigator with a couple of items as the drawer’s child that will be
navigated to different destinations on getting tapped. All children of a Drawer widget are
usually in ListView and initially, only the DrawerHeader is present in the UI which when
tapped extends horizontally.

Constructors:

Syntax:

Drawer({Key key, double elevation: 16.0, Widget child, String semanticLabel})

Properties:

child: The widgets below this widget in the tree.

hashCode: The hash code for this object.

key: Controls how one widget replaces another widget in the tree.

runtimeType: A representation of the runtime type of the object.

elevation: The z-coordinate at which to place this drawer relative to its parent.

semanticLabel: The semantic label of the dialogue used by accessibility frameworks to

announce screen transitions when the drawer is opened and closed.

Important Function:

build(BuildContext context) → Widget: This method specifies the part of the UI rendered by
the widget. This method is called when the Drawer widget is inserted into the tree in a given
BuildContext and when the dependencies of the Drawer widget change.

Implementation:

@override

Widget build(BuildContext context) {

assert(debugCheckHasMaterialLocalizations(context));

String? label = semanticLabel;

switch (Theme.of(context).platform) {

case TargetPlatform.iOS:

case TargetPlatform.macOS:

break;

case TargetPlatform.android:

case TargetPlatform.fuchsia:

case TargetPlatform.linux:

case TargetPlatform.windows:

label = semanticLabel ?? MaterialLocalizations.of(context).drawerLabel;

return Semantics(

scopesRoute: true,

namesRoute: true,
 explicitChildNodes: true,

label: label,

child: ConstrainedBox(

constraints: const BoxConstraints.expand(width: _kWidth),

child: Material(

elevation: elevation,

child: child,

),

),

);

Why Drawers?

Drawers are very easy to implement as well as handy to balance different functionalities of
your mobile application at the same time. Creating a drawer makes visiting different
destinations in your app quite easy and manageable to a large extent, especially in the case
of a complex application with many screens.

You can easily switch between different screens and perform tasks.

Steps to Create a Drawer:

A drawer can be set using 4 simple steps:

1. Create a flutter project: Open the terminal and navigate to the desired location in which
you want to create your project. Using the “flutter create project_name” command creates
your flutter project.

flutter create file_name

2. Create a scaffold widget: Inside the MyApp Class of your stateless/stateful widget return a
scaffold widget. A Scaffold Widget provides a framework for implementing the basic visual
layout structure of the flutter app.
Scaffold(

drawer:

);

3. Add Drawer inside the scaffold: Set the scaffold’s drawer property to Drawer with
ListView as its child or you can add a Container with a ListView as its child as well. Various
ListViews contain desired items that needed to be displayed inside the drawer.

Scaffold(

drawer: Drawer(

//...

),);

4. Add a closing functionality: Navigator is used for implementing closing functionality on the
drawer when the user wants to close it after tapping on some item. This can be done using a
Navigator State.

Navigator.of(context).pop();

Types of Navigation Drawer:

An app drawer is divided into three categories:

1. Standard Navigation Drawer: They provide user interaction with the screen content and
drawer at the same time.

2. Modal Navigation Drawer: These drawers block the user interaction with the rest of the
screen and allow only the user to interact with the drawer only.

3. Bottom Navigation Drawer: These are similar to modal navigation drawers except the
orientation of the drawer is towards the bottom section of the screen.