Flutter: Everything is a Widget Series — Part 4: MaterialApp
One of the main themes that quickly jump at you while using Flutter is that everything is a widget. The series aims to help beginners understand this simple yet powerful concept and introduce them to basic widgets in Flutter.
To help us in this journey, I built a Twitter App Mobile UI Clone using only the inbuilt widgets that come with Flutter. You can find the code at https://github.com/topeomot2/twitter-ui-app
Every Flutter app starts from a call to main(), which calls the runApp command. The runApp commands simply set up the root widget of the Application. We simply feed the command with the root widget and we start building our widget tree from there.
void main() => runApp(MyApp());class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Twitter UI',
theme: new ThemeData(
primaryColor: DarkModeBg,
),
home: TwitterHomePage(),
);
}
}
MaterialApp
According to the Flutter SDK comments
“A MaterialApp is an application that uses material design.”
Material Design is a design language that was introduced by Google in 2014. By design language, we mean guidelines that help to give a unique but consistent look and feel. So Material Design is one such design language that has become popular from Applications on Mobile and Web.
Every major framework has a port of Material Design elements that are available for use.
For Android Applications, Material Design has become the defacto standard and is encouraged by Google. There are sets of components (designed with the material design guidelines)that are expected in a material design application.
Flutter and Material Design
The Flutter team also wants these components available to developers.
They came up with a convenience widget that wraps several widgets that are commonly required for material design applications.
This convenience widget is called MaterialApp. So if you want to build an application that uses the material design guidelines out of the box, you simply wrap your screens in a MateriaApp widget and you get some awesome prebuilt widget.
CupertinoApp
Material Design Language is not the only one supported in Flutter. Material Design Language is used a lot in Android Applications, for IOS applications, we have the Cupertino Design Language.
And the convenience widget that makes this available in flutter is the CupertinoApp.
I use one of these design languages to give my app a consistent look and feel so that they look like applications that were built with the native SDKs either in Android and IOS. they save a lot of time.