MaterialApp Widget Tutorial

An application that uses material design. A convenience widget that wraps a number of widgets that are commonly required for material design applications.


MaterialApp Widget useful Inputs

  • home: Will take any kinds of Widget type. Example: Text('Bismillah App'). It’s also use for the default route of the app.

  • title: A one-line description used by the device to identify the app for the user

  • theme: Default visual properties, like colors fonts and shapes, for this app’s material widgets.

  • darkTheme: The ThemeData to use when a 'dark mode' is requested by the system.

  • themeMode: Determines which theme will be used by the application if both theme and darkTheme are provided.

  • routes: The application’s top-level routing table.

  • initialRoute: The name of the first route to show, if a Navigator is built.

  • debugShowCheckedModeBanner: Turns on a little "DEBUG" banner in checked mode to indicate that the app is in checked mode. This is on by default (in checked mode), to turn it off, set the constructor argument to false. In release mode this has no effect.


MaterialApp Widget example

Show text only using MaterialApp

MaterialApp(
  title: 'Bismillah App',
  home: Text('Bismillah App'),
);
MaterialApp(
      title: "Material App Example",
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.dark,
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('Home Route'),
            ),
          );
        },
        '/about': (BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('About Route'),
            ),
          );
        }
      },
    );

Full example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MaterialAppExample extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Material App Example",
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.dark,
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('Home Route'),
            ),
          );
        },
        '/about': (BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('About Route'),
            ),
          );
        }
      },
    );
  }
}

void main() => (runApp(MaterialAppExample()));


Output

material-widget


References
Share