MaterialApp

MaterialApp ist eine vordefinierte Klasse oder ein Widget einer Flutter-App. Es handelt sich wahrscheinlich um die Haupt- oder Kernkomponente einer Flutter-App. Das MaterialApp-Widget bietet einen Wrapper für andere Material-Widgets. Wir können auf alle anderen vom Flutter SDK bereitgestellten Komponenten und Widgets zugreifen. Text-Widget, DropdownButton-Widget, AppBar-Widget, Scaffold-Widget, ListView-Widget, StatelessWidget, StatefulWidget, IconButton-Widget, TextField-Widget, Padding-Widget, ThemeData-Widget usw. sind die Widgets, auf die über die MaterialApp-Klasse zugegriffen werden kann. Es gibt viele weitere Widgets, auf die über die MaterialApp-Klasse zugegriffen werden kann. Mit diesem Widget können wir eine attraktive App erstellen, die den Material Design-Richtlinien entspricht.

Konstruktor:

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}
)

Eigenschaften:

• action: Diese Eigenschaft verwendet Map<Type, Action<Intent>> als Objekt. Es steuert intent keys.
• backButtonDispatcher: Er entscheidet, wie mit der Zurück-Schaltfläche umgegangen werden soll.
• checkerboardRasterCacheImage:  Diese Eigenschaft akzeptiert einen booleschen Wert als Objekt. Wenn es auf „true“ gesetzt ist, wird das Schachbrettmuster von Raster-Cache-Bildern aktiviert.
• color: Steuert die in der Anwendung verwendete Primärfarbe.
• darkTheme: Es stellte Theme-Daten für das dunkle Theme für die Anwendung bereit.
• debugShowCheckedModeBanner: Diese Eigenschaft akzeptiert einen booleschen Wert als Objekt, um zu entscheiden, ob das Debug-Banner angezeigt werden soll oder nicht.
• debugShowMaterialGird: Diese Eigenschaft akzeptiert einen booleschen Wert als Objekt. Wenn es auf „true“ gesetzt ist, wird eine Grundlinien-Rastermaterial-App gezeichnet.
• highContrastDarkTheme: Es stellt die Theme-Daten bereit, die für das kontrastreiche Theme verwendet werden sollen.
• home: Diese Eigenschaft übernimmt das Widget als Objekt, das auf der Standardroute der App angezeigt werden soll.
• initialRoute: Diese Eigenschaft nimmt eine Zeichenfolge als Objekt an, um den Namen der ersten Route anzugeben, in der der Navigator erstellt wird.
• locale: Es stellt ein locale (Gebietsschema) für die MaterialApp bereit.
• localizationsDelegate: Deligiert locale
• navigatorObserver: Er verwendet den GlobalKey<NavigatorState> als Objekt zum Generieren eines Schlüssels beim Erstellen eines Navigators.
• navigatorObserver: Diese Eigenschaft enthält List<NavigatorObserver> als Objekt zum Erstellen einer Liste von Beobachtern für den Navigator.
• onGenerateInitialRoutes: Diese Eigenschaft nimmt die InitialRouteListFactory typedef als Objekt um daraus die initial routes zu generieren.
• onGeneratRoute: Die onGenerateRoute nimmt eine RouteFactory als Objekt. Es wird verwendet, wenn in der App mit named routes navigiert wird.
• onGenerateTitle: Diese Eigenschaft übernimmt die RouteFactory-Typdefinition als Objekt, um einen String  für den Titel der Anwendung zu generieren (sofern vorhanden)
• onUnknownRoute: Die onUnknownRoute verwendet ein RouteFactory typedef Objekt zur Bereitstellung einer Route (route) für den Fall, dass eine andere Methode fehlschlägt.
• routeInformationParse: Diese Eigenschaft enthält ein RouteInformationParser<T> Objekt um die Routing-Informationen vom routeInformationProvider in einen generischen Datentyp umzuwandeln.
• routeInformationProvider: Diese Eigenschaft verwendet ein RouteInformationProvider class Objekt. Es ist für die Bereitstellung von Routing-Informationen verantwortlich.
• routeDelegate: Diese Eigenschaft verwendet ein RouterDelegate<T>  Objekt to configure a given widget.
• routes: Die Routes-Eigenschaft verwendet die LogicalKeySet-Klasse als Objekt zur Steuerung des Routings der obersten Ebene der App.
• shortcuts: Diese Eigenschaft verwedent ein LogicalKeySet Klassen-Objekt, um die Tastenkombination für die Anwendung festzulegen.
• showPerformanceOverlay: Akzeptiert einen booleschen Wert als Objekt zum Aktivieren oder Deaktivieren des Leistungs-Overlays.
• showSemantisDebugger: Diese Eigenschaft akzeptiert einen booleschen Wert als Objekt. Wenn der Wert auf „true“ gesetzt ist, werden einige zugängliche Informationen angezeigt.
• supportedLocales: Die Eigenschaft „supportedLocales“ behält die in der App verwendeten Locals im Auge, indem sie die Klasse Iterable<E> als Objekt verwendet.
• theme: Diese Eigenschaft verwendet die ThemeData-Klasse als Objekt zur Beschreibung des Theme für die MaterialApp.
• themeMode:  Diese Eigenschaft enthält ein ThemeMode enum Objekt, um über das verwendete Theme der material app zu entscheiden
• title: Der title verwendeten ein String Objekt als einzeilige Beschreibung der App auf dem Gerät.

Beispiel:

import ‚package:flutter/material.dart‘;

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

       return MaterialApp(

         title: ‚Flutter24.de Beispiel‘,

         theme: ThemeData(primarySwatch: Colors.red),

         darkTheme: ThemeData(primarySwatch: Colors.grey),

         color: Colors.amberAccent,

         supportedLocales: {const Locale(‚en‘, ‚ ‚)},

         debugShowCheckedModeBanner: false,

         home: Scaffold(

                 appBar: AppBar(title: const Text(‚Flutter24.de Beispiel‘)),

               ),

       );

     }

}

Erklärungen zum Beispiel: 

• import: Die import Anweisung wird verwendet, um die vom Flatter-SDK bereitgestellten Bibliotheken zu importieren. Hier haben wir die Datei „material.dart“ importiert. Durch den Import dieser Datei können wir alle Flatter-Widgets verwenden, die das Materialdesign implementieren.
• main() : Wie viele andere Programmiersprachen gibt es  eine Hauptfunktion, in der die Anweisungen enthalten sein müssen, die beim Start der App ausgeführt werden sollen. Der Rückgabetyp der Hauptfunktion ist „void“, d.h. es wird nichts zurückgegeben.
• runApp(): Das void runApp(Widget widget) nimmt ein Widget als Argument und zeigt es auf dem Bildschirm. Es gibt dem Widget die notwendigen Einschränkungen mit, damit es in den Bildschirm passt. Dadurch wird das angegebene Widget zum Stamm-Widget der App und andere Widgets zu deren untergeordneten Widgets. Hier haben wir die MaterialApp als Root-Widget verwendet, in dem wir die anderen Widgets definiert haben
• MaterialApp(): Wir haben MaterialApp am Anfang besprochen. Werfen wir einen Blick auf die verschiedenen Eigenschaften des MaterialApp-Widgets.
• title: Diese Eigenschaft wird verwendet, um dem Benutzer eine kurze Beschreibung der Anwendung bereitzustellen. Wenn der Benutzer auf dem Mobilgerät auf den Button „recent apps“drückt, wird der im Titel angezeigte Text angezeigt.
• theme: Diese Eigenschaft wird verwendet, um der Anwendung das Standarddesign bereitzustellen, z. B. die Designfarbe der Anwendung.
• Hierzu verwenden wir die eingebaute Klasse/das eingebaute Widget namens ThemeData(). Im Themedata()-Widget müssen wir die verschiedenen Eigenschaften schreiben, die sich auf das Theme beziehen. Hier haben wir das PrimarySwatch verwendet, das zum Definieren der Standarddesignfarbe der Anwendung verwendet wird. Um die Farbe auszuwählen, haben wir die Klasse „color“ aus der Materialbibliothek verwendet. In ThemeData() können wir auch einige andere Eigenschaften definieren, wie TextTheme, Brightness (Dunkles Theme kann dadurch aktiviert werden), AppBarTheme und viele mehr.
• home: Es wird für die Standardroute der App verwendet, was bedeutet, dass das darin definierte Widget angezeigt wird, wenn die Anwendung normal startet. Hier haben wir das Scaffold-Widget innerhalb der Home-Eigenschaft definiert. Innerhalb des Scaffolds definieren wir verschiedene Eigenschaften wie appBar, body, floatActionButton, backgroundColor usw.
• Beispielsweise haben wir in der appBar-Eigenschaft das AppBar()-Widget verwendet, das „’Flutter24.de Beispiel“ als Titel akzeptiert. Dieser wird oben in der Anwendung in der Appbar angezeigt.
• Die anderen Eigenschaften in MaterialApp() sind debugShowCheckedModeBanner (wird zum Entfernen des Debug-Tags in der oberen Ecke verwendet), darkTheme (zum Anfordern des dunklen Anzeigmodus in der Anwendung), color (für die Primärfarbe der Anwendung), routes(für die Routing-Tabelle der Anwendung),  ThemeMode (um zu bestimmen, welches Theme verwendet werden soll) und supportedLocales enthält eine Liste der von der App unterstützten Sprachen usw.