En Flutter, Material es un conjunto de guías de diseño y principios definidos por Google que ayudan a crear aplicaciones Android modernas y visualmente atractivas y estan disponibles al crear cualquier aplicación en Flutter.
El Material es una hoja de estilos que contienen el diseño de interfaz de usuario (UI); en Flutter, existen un conjunto de widgets predefinidos que siguen las directrices de diseño de Material Design, por lo tanto, lo tenemos de gratis. El uso de estos widgets hace que sea más fácil y rápido crear aplicaciones consistentes en cuanto a diseño y de alta calidad.
Algunos ejemplos de widgets de Material en Flutter son RaisedButton, FloatingActionButton, ListTile entre otros.
Los widgets a nivel de implementación no son más que clases, por lo tanto, tienen un enorme nivel de personalización y comportamiento.
Material es un sistema de diseño que lo ayuda a crear aplicaciones atractivas y accesibles en dispositivos móviles, web y de escritorio.
En Flutter, la librería de materiales proporciona a los desarrolladores todos los componentes básicos que necesita su interfaz de usuario. Desde el lanzamiento de Material 3 en Google I/O 2021, el equipo de Flutter ha estado actualizando la biblioteca de material de Flutter para admitir estos nuevos cambios.
Material 3
Para ver las últimas actualizaciones de Material 3, consulte nuestra aplicación de muestra. Te permite interactuar con todos los widgets en vivo.
Esta aplicación demuestra los componentes actualizados y le permite alternar entre el Material 2 y el Material 3, el modo claro y el modo oscuro, y probar diferentes combinaciones de colores.
Empezar
Para agregar Material 3 a su aplicación, establezca el indicador useMaterial3 en verdadero en el constructor del tema:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(useMaterial3: true),
body: MyHomePage(),
);
}
}Nuevos widgets
Para obtener la mayoría de los cambios del widget, configure el indicador useMaterial3. Sin embargo, algunos widgets han cambiado tanto en Material 3 que han sido reemplazados por nuevos widgets. Estos son algunos de los nuevos widgets:
NavigationBar y NavigationDrawer
El widget BottomNavigationBar se reemplazó con NavigationBar. Es un poco más alto y no tiene sombra paralela (que indica elevación).
Botones segmentados
Los botones segmentados le brindan a su usuario una opción alternable entre varias opciones en un solo widget. De forma predeterminada, solo puede seleccionar un elemento, a menos que especifique el parámetro multiSelectionEnabled.
Badges
El nuevo widget Badge se puede usar para brindar información adicional, generalmente indicando un recuento o un cambio de estado, a un widget principal. Están disponibles en tamaños grandes y pequeños:
Generación de un esquema de color
Una característica completamente nueva de Material 3 permite configurar el tema de color de toda su aplicación a partir de un solo color inicial. Establece el parámetro semilla del esquema de colores en el constructor de tu tema y, a partir de esa entrada, Flutter genera un esquema de colores armonioso para cada widget de tu aplicación. ¡Este esquema funciona tanto en modo claro como oscuro!
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(
useMaterial3: true,
colorSchemeSeed: Color.fromRGBO(188, 0, 74, 1.0);
),
body: MyHomePage(),
);
}Si desea personalizar aún más su combinación de colores, visite la aplicación Generador de materiales. Puede definir colores secundarios y terciarios para crear una paleta de colores completamente única. Lo mejor de todo es que exporta archivos Dart que puedes usar inmediatamente en tu aplicación Flutter.
Puedes ver ejemplos de los widgets en:
https://flutter.github.io/samples/web/material_3_demo/#/
Artículo original: https://medium.com/flutter/material-3-for-flutter-d417a8a65564
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter