Clase MaterialApp en Flutter

por
Clase MaterialApp en Flutter
Clase MaterialApp en Flutter

Tabla de contenidos

Clase MaterialApp: MaterialApp es una clase predefinida en Flutter. Es probable que sea el componente principal o central del aleteo. Podemos acceder a todos los demás componentes y widgets proporcionados por Flutter SDK. Widget de texto, DropDownButton flash, AppBar flash, Scaffold de widgets, ListView de widgets, StatelessWidget , StatefulWidget , IconButton del widget, widget de campo de texto, Relleno de widget, widget de ThemeData, etc., son los widgets que se puede acceder utilizando la clase MaterialApp. 

Hay muchos más widgets a los que se accede mediante la clase MaterialApp. Usando este widget, podemos hacer una aplicación atractiva. Aquí hay un código muy simple en lenguaje de dardos para hacer una pantalla que tiene una barra de aplicaciones.

Constructor de la clase MaterialApp

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

Propiedades del widget MaterialApp

  • action: esta propiedad toma   Map <Type, Action <Intent>> como el objeto. Controla las claves de intención.
  • backButtonDispatcher: Decide cómo manejar el botón de retroceso.
  • checkerboardRasterCacheImage:   esta propiedad toma un booleano como objeto. Si se establece en verdadero, activa el tablero de ajedrez de imágenes de caché ráster.
  • color: Controla el color primario utilizado en la aplicación.
  • darkTheme: proporcionó datos de tema para el tema oscuro de la aplicación.
  • debugShowCheckedModeBanner: esta propiedad toma un booleano como objeto para decidir si mostrar el banner de depuración o no.
  • debugShowMaterialGird: esta propiedad toma un booleano como objeto. Si se establece en verdadero, pinta una aplicación de material de cuadrícula de línea de base.
  • highContrastDarkTheme: proporcionó los datos del tema que se utilizarán para el tema de alto contraste.
  • home: esta propiedad toma el widget como el objeto para mostrar en la ruta predeterminada de la aplicación.
  • initialRoute: esta propiedad toma una cadena como objeto para dar el nombre de la primera ruta en la que se construye el navegador.
  • locale: proporciona una locale para MaterialApp.
  • localizationsDelegate: esto proporciona un delegado para las configuraciones regionales.
  • navigatorObserver: toma GlobalKey <NavigatorState> como el objeto para generar una clave al construir un navegador.
  • navigatorObserver: esta propiedad contiene List <NavigatorObserver> como el objeto para crear una lista de observadores para el navegador.
  • onGenerateInitialRoutes: esta propiedad toma InitialRouteListFactory typedef como el objeto para generar rutas iniciales.
  • onGeneratRoute: El onGenerateRoute toma en un RouteFactory que el objeto. Se utiliza cuando la aplicación se navega a una ruta con nombre.
  • OnGenerateTitle: esta propiedad toma RouteFactory typedef como el objeto para generar una cadena de título para la aplicación, si se proporciona.
  • onUnknownRoute: El onUnknownRoute toma en typedef RouteFactory como el objeto de proporcionar una ruta en caso de fallo en otro metheod.
  • routeInformationParse: esta propiedad mantiene RouteInformationParser <T> como el objeto de la información de enrutamiento de routeInformationProvider en un tipo de datos genérico.
  • routeInformationProvider: esta propiedad toma la clase RouteInformationProvider como objeto. Es responsable de proporcionar información de enrutamiento.
  • routeDelegate: esta propiedad toma RouterDelegate <T>  como el objeto para configurar un widget dado.
  • routes: la propiedad de routes toma la clase LogicalKeySet como el objeto para controlar el enrutamiento de nivel superior de la aplicación.
  • shortcuts: esta propiedad toma la clase LogicalKeySet como el objeto para decidir el atajo de teclado para la aplicación.
  • showPerformanceOverlay: El showPerformanceOverlay toma en un booleano valor que el objeto para activar o desactivar superposición rendimiento.
  • showSemantisDebugger: esta propiedad toma un booleano como objeto. Si se establece en verdadero, muestra información accesible.
  • supportedLocales: la propiedad supportedLocales mantiene los locales utilizados en la aplicación al tomar la clase Iterable <E> como objeto.
  • theme: esta propiedad toma la clase ThemeData como el objeto para describir el tema de MaterialApp.
  • themeMode:  esta propiedad contiene la enumeración ThemeMode como el objeto para decidir el tema de la aplicación de material.
  • title: la propiedad title toma una cadena como el objeto para decidir la descripción de una línea de la aplicación para el dispositivo.

Ejemplo y aplicación en código

import 'package:flutter/material.dart';

void main() {
  runApp( MaterialApp(
    title: "BigCode",
    theme: ThemeData(primarySwatch: Colors.green),
    home: Scaffold(appBar: AppBar(title: const Text("bigcode"),),),));
}
Class MaterialApp en Flutter

Explicación del código:

  • declaración de importación (import): la declaración de importación se utiliza para importar las bibliotecas que proporciona el SDK de flutter. Aquí hemos importado el archivo ‘material.dart’. Podemos usar todos los widgets de flutter que implementan el diseño de material importando este archivo.
  • Función main (): como muchos otros lenguajes de programación, también tenemos la función principal en la que tenemos que escribir las sentencias que se ejecutarán cuando se inicie la aplicación. El tipo de retorno de la función principal es ‘void’ .
  • Función runApp (widget de widget): la función runApp (widget de widget) void toma un widget como argumento y lo establece en una pantalla. Le da las restricciones al widget para que se ajuste a la pantalla. Hace que el widget dado sea el widget raíz de la aplicación y otros widgets como su hijo. Aquí hemos utilizado MaterialApp como widget raíz en el que hemos definido los otros widgets.
  • Widget MaterialApp (): he hablado de MaterialApp al principio. Echemos un vistazo a las diferentes propiedades del widget MaterialApp. 
  • title: esta propiedad se utiliza para proporcionar una breve descripción de la aplicación al usuario. Cuando el usuario presiona el botón de aplicaciones recientes en el dispositivo móvil, se muestra el texto del título . 
  • theme: esta propiedad se utiliza para proporcionar el tema predeterminado a la aplicación, como el color del tema de la aplicación. Para esto, usamos la clase/widget incorporado llamado ThemeData(). En el widget Themedata() tenemos que escribir las diferentes propiedades relacionadas con el tema. Aquí hemos utilizado el primarySwatch, que se utiliza para definir el color de tema predeterminado de la aplicación. Para elegir el color hemos utilizado la clase Colores de la biblioteca de materiales. En ThemeData () también podemos definir algunas otras propiedades como TextTheme, Brightness (Puede habilitar el tema oscuro con esto), AppBarTheme y muchas más.
  • home: se usa para la ruta predeterminada de la aplicación, lo que significa que el widget definido en él se muestra cuando la aplicación se inicia normalmente. Aquí hemos definido el widget Scaffold dentro de la propiedad de la casa. Dentro del Scaffold definimos varias propiedades como appBar, body, floatingActionButton, backgroundColor, etc. 
    Por ejemplo en la propiedad appBar hemos utilizado el widget AppBar () en el que como título hemos pasado ‘GeeksforGeeks’ que se mostrará en la parte superior de la aplicación en la barra de aplicaciones.
  • Las otras propiedades en MaterialApp () son debugShowCheckedModeBanner (utilizado para eliminar la etiqueta de depuración en la esquina superior), darkTheme (para solicitar el modo oscuro en la aplicación), color (para el color primario de la aplicación), rutas (para la tabla de enrutamiento de la aplicación), ThemeMode (para determinar qué tema se utilizará), etc.

Fuente de Recursos