Las interfaces de usuario (UI) son un componente crítico en el logro y la simpatía de las aplicaciones y los sitios web. Además, dado que las interfaces de usuario tienen que ver con la apariencia y los dialectos del diseño, es vulnerable a cambios en los patrones y estilos ganadores. A lo largo del tiempo, diferentes estilos de desarrollo han afectado el entorno de la interfaz de usuario. El skeuomorfismo al final ofreció un enfoque a los planes llanos y moderados. Luego vino el neumorfismo, que fue impulsado por objetos en el mundo real. El patrón más reciente que ha abrumado al mundo de la interfaz de usuario es Glassmorphism.
Glassmorphism es el patrón más reciente en las interfaces de usuario y está tomando prominencia rápidamente. Uno de los usos más estándar de este plan apareció en macOS Big Sur de Apple, que se lanzó en 2020. Sin embargo, ¿qué es Glassmorphism ? Como su nombre indica, tiene un aspecto sencillo y suave. Es factible que los clientes vean a través de las capas. Estas capas pueden ayudar a presentar un sistema progresivo en el diseño. Los aspectos más destacados de este nuevo estilo de interfaz de usuario son:
- Sencillamente, como se aclaró anteriormente, esta técnica se hace cargo de un vidrio virtual, con desenfoque de fondo.
- Una metodología de múltiples capas que parece como si los artículos estuvieran rozando el espacio.
- El impacto oscurecido se destaca con tonos enérgicos.
- Un límite discreto en los elementos claros
Dado que Flutter es el mejor kit de desarrollo de software de interfaz de usuario de código abierto para crear aplicaciones en diferentes plataformas utilizando una base de código única, lo usaremos para la demostración de este diseño de interfaz de usuario de tendencia.
Paso 1: crear un nuevo proyecto de aplicación flutter y agregar las dependencias necesarias.
- Abra Vs Code, presione «Ctrl + Shift + P» y seleccione «Flutter: Nuevo proyecto de aplicación»
- Seleccione la carpeta a la que desea agregar este proyecto de aleteo o cree uno nuevo
- Luego, después de seleccionar la carpeta, asigne un nombre a su proyecto y presione «Enter»
- Flutter creará un nuevo proyecto para usted, luego, en la parte inferior izquierda, haga clic en el archivo «pubspec.yaml»
- Agregue las siguientes dependencias, que incluyen el paquete glassmorphism (consulte: https://pub.dev/documentation/glassmorphism/latest/ ) y el paquete de fuentes de Google (consulte: https://pub.dev/packages/google_fonts ) para usar el contenedor glassmorphic y fuentes de google
dependencies:
flutter:
sdk: flutter
glassmorphism ^1.0.4
google_fonts ^1.1.2
Paso 2: crear la carpeta de activos y agregar los activos necesarios
- En el lado izquierdo, busque la opción «Nueva carpeta», agregue una nueva carpeta y asígnele el nombre «activos»
- Haga clic con el botón derecho en la carpeta y haga clic en «Mostrar en el Explorador de archivos», en la carpeta de activos, cree una carpeta más y asígnele el nombre «imágenes».
- Vaya a este enlace y descargue los archivos de activos o puede elegir las imágenes por su cuenta
- Copie estos archivos en la carpeta de activos, abra el archivo » pubspec.yaml » nuevamente y agregue lo siguiente a la sección «flutter»
flutter:
uses-material-design: true
assets:
- assets/images/gfg_1.png
- assets/images/technical_scripter.png
Paso 3: Este es el código para el archivo “main.dart” en la carpeta “lib”:
Dart
import 'package:flutter/material.dart';
import 'HomePage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
Paso 4: agregar el código de la página de inicio a nuestro proyecto
- Haga clic derecho en la carpeta «lib», agregue el nuevo archivo y asígnele el nombre «HomePage.dart»
- El siguiente es el código para el archivo “HomePage.dart”
Dart
// Dart Program to create a Glassmorphism UI for app
// importing material.dart
import 'package:flutter/material.dart';
// importing glassmorphism package
import 'package:glassmorphism/glassmorphism.dart';
// importing google fonts
import 'package:google_fonts/google_fonts.dart';
// creating class of stateful widget
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
// for responsiveness of the ui we get the height
// of current media using media queries
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
// for creating a linear gradient in
// the background using two colors
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.deepOrangeAccent,
Colors.lightGreenAccent,
], begin: Alignment.topLeft, end: Alignment.bottomRight)),
// building the layout
child: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: [
// for creating the purple ball
Positioned(
top: constraints.maxHeight * 0.19,
left: constraints.maxWidth * 0.01,
child: Container(
height: constraints.maxHeight * 0.20,
width: constraints.maxWidth * 0.35,
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [
Colors.deepPurpleAccent,
Colors.purple
],
radius: 0.7,
),
shape: BoxShape.circle),
)),
// for creating the red ball
Positioned(
top: constraints.maxHeight * 0.61,
right: constraints.maxWidth * 0.01,
child: Container(
height: constraints.maxHeight * 0.20,
width: constraints.maxWidth * 0.35,
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [
Colors.red.withOpacity(0.6),
Colors.redAccent
],
radius: 0.7,
),
shape: BoxShape.circle),
)),
// for creating the glassmorphic
// container in the center
Center(
child: GlassmorphicContainer(
height: constraints.maxHeight * 0.5,
width: constraints.maxWidth * 0.8,
borderRadius: constraints.maxHeight * 0.02,
blur: 15,
alignment: Alignment.center,
border: 2,
linearGradient: LinearGradient(
colors: [
Colors.white.withOpacity(0.2),
Colors.white38.withOpacity(0.2)
],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
borderGradient: LinearGradient(colors: [
Colors.white24.withOpacity(0.2),
Colors.white70.withOpacity(0.2)
]),
child: Stack(
children: [
// providing gfg logo to the container
Positioned(
top: constraints.maxHeight * 0.025,
right: constraints.maxWidth * 0.05,
child: Container(
height: constraints.maxHeight * 0.5,
width: constraints.maxWidth * 0.70,
child: Image.asset('assets/images/gfg_1.png'),
),
),
// providing text to the container
Positioned(
top: constraints.maxHeight * 0.010,
right: constraints.maxWidth * 0.05,
child: Container(
height: constraints.maxHeight * 0.23,
width: constraints.maxWidth * 0.60,
child: Image.asset(
'assets/images/technical_scripter.png'),
),
),
// providing technical scripter
// logo to the container
Positioned(
top: constraints.maxHeight * 0.35,
right: constraints.maxWidth * 0.10,
child: Container(
height: constraints.maxHeight * 0.2,
width: constraints.maxWidth * 0.60,
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.centerLeft,
child: Text(
"Technical Scripter 2020 Article.1",
style: GoogleFonts.montserrat(
textStyle: TextStyle(
color: Colors.white,
letterSpacing: 1,
fontSize: 80,
fontWeight: FontWeight.w700)),
),
),
),
),
],
),
),
),
],
);
},
)));
}
}
Paso 5: agregar un nuevo dispositivo y ejecutar el proyecto
- Agregue un nuevo dispositivo a su proyecto como cualquier emulador móvil de Android, dispositivo real o Chrome (web)
- Después de eso, presione «Ctrl + F5» o vaya a «Ejecutar»> «Ejecutar sin depurar» y vea el resultado en su dispositivo conectado
Producción:
Animación de interfaz de usuario de morfismo de vidrio
Publicación traducida automáticamente
Artículo escrito por saranshsahgal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA