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. This 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 Mobile Clone App 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.

Material-UI: A popular React UI framework

Vue Material Design Component Framework - Vuetify.js

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.

Material Design for Android | Android Developers

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.

Flutter Material Components widgets

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.

Flutter Cupertino (iOS-style) widgets

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.