MaterialApp Class: MaterialApp is a predefined class in a flutter. It is likely the main or core component of flutter. We can access all the other components and widgets provided by Flutter SDK. Text widget, Dropdownbutton widget, AppBar widget, Scaffold widget, ListView widget, StatelessWidget, 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.
Here is a very simple code in dart language to make a screen which has an appbar title as GeeksforGeeks.
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 implements 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 set it in a screen. It gives the constraints to the widget to fit into the screen. It makes the given widget as 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 about MaterialApp in the beginning. Let us have a look on 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 in mobile the text proceeded in title is displayed.
theme: This property is used provide the default theme to the application like the theme-color of application.
For this we use the inbuilt class/widget named ThemeData(). In Themedata() widget we have to write the different properties related to theme. Here we have used the primarySwatch which is used to define the default themecolor of application. To choose the color we have used Colors class from the material library. In ThemeData() we can also define some other properties like TextTheme, Brightness(Can enable dark theme by this), AppBarTheme and many more…
home: It is used for the default route of the app means the widget defined in it is displayed when the application starts normally. Here we have defined the Scaffold widget inside the home property. Inside the Scaffold we define various properties like appBar, body, floatingActionButton, backgroundColor, etc.
For example in the appBar property we have used the AppBar() widget in which as a title we have passed ‘GeeksforGeeks’ which will be displayed at the top of the application in appbar.
- The other properties in MaterialApp() are debugShowCheckedModeBanner (used to remove the debug tag at top corner), darkTheme (To request dark mode in application), color (For primary color of application), routes (For routing table of application), ThemeMode (To determine which theme to be used) etc.
Implementation of the above code:
- Here we can see that the text defined in the title of the appbar is displayed at the top.
- The default theme-color is green as we defined.
- runApp() has fitted the widget in the whole screen.
- Scaffold class in Flutter with Examples
- Flutter GridView
- Routes and Navigator in Flutter
- Difference between React Native and Flutter
- Multi Page Applications in Flutter
- Getting Started with Cross-Platform Mobile Application using Flutter
- How to find the parent class name with known class in jQuery ?
- How to override the CSS properties of a class using another CSS class ?
- CSS | Class Selector
- What is the use of the “no-js” class in HTML ?
- How div class and id is useful in HTML ?
- How to use Class in Node.js ?
- TypeScript class
- How to select a div with a certain class using jQuery ?
- ES6 | Class Variable Alternatives
- AngularJS | ng-class-even Directive
- Difference between an id and class in HTML?
- AngularJS | ng-class-odd Directive
- AngularJS | ng-class Directive
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.