Neumorfismo en Flutter

El neumorfismo es un elemento de la interfaz de usuario que usa sombras para crear un efecto de elevación. Se consideran dos bordes opuestos del contenedor, uno frente a una fuente de luz y otro opuesto. Esto crea una sombra en el otro lado del contenedor. Esto le da a nuestro widget un aspecto elegante y limpio. Entonces, para crear un diseño Neumorphic, primero crearemos un widget sin estado en flutter y lo llamaremos NeumorphicDesign . 

En este artículo, veremos un elemento de interfaz de usuario interesante llamado neumorfismo . Veremos cómo podemos modificar nuestro contenedor básico en Flutter a un contenedor Neumorphic que podemos usar en nuestra aplicación. Además, usaremos el contenedor Flutter para crear Neumorphism y VS Code para crear la aplicación Flutter. 

import 'package:flutter/material.dart';
  
void main() {
  runApp(const MyApp());
}
  
// Root widget of your app
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const NeumorphicDesign(),
    );
  }
}
  
class NeumorphicDesign extends StatelessWidget {
  const NeumorphicDesign({Key? key}) : super(key: key);
  // Write your widget here
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(),
    );
  }
}

En primer lugar, vamos a darle color de fondo a nuestra aplicación. Como solo hemos creado un contenedor, cuando ejecutamos la aplicación solo veremos una pantalla en blanco ya que el contenedor en sí no contiene nada. Así que vamos a darle algo de alto y ancho a nuestro Contenedor. También al envolver Container usando Center podemos convertirlo en el centro de nuestra aplicación.

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return Scaffold(
      // Background color to the app
      backgroundColor: Colors.grey[300],
      // Widget to center the widgets inside it.
      body: Center(
        child: Container(
            // Providing Container 
              // with height and width
            height: 200.0,
            width: 200.0,
        ),
      );
    }
}

Para cambiar el color o asignar borderRadius a un contenedor, necesitamos usar BoxDecoration .

Constructor de la clase BoxDecoration:

BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
)}

Usaremos borderRadius y boxShadow para personalizar nuestro Contenedor.

Container(
  height = 200.0,
  width = 200.0, 
  decoration: BoxDecoration(
    // Providing container with rounded corners.
    borderRadius: BorderRadius.circular(50),
  ),
),

Ahora, para hacer un widget neumórfico primero, el color del widget debe ser el mismo que el color de fondo. Y la separación del widget de su fondo se crea utilizando el parámetro boxShadow de BoxDecoration. Para crear el diseño, consideremos la esquina superior izquierda de nuestra aplicación como una fuente de luz. Cuando cae sobre nuestro Contenedor, la esquina superior izquierda estará directamente frente a la luz, mientras que la esquina inferior derecha estará opuesta a la luz, lo que significa que tenemos que seleccionar un tono claro para la parte superior izquierda, mientras que el tono oscuro de fondo para la esquina inferior izquierda. Entonces, según esta lógica, le daremos sombras a nuestro contenedor. Con la ayuda de blurRadius podemos controlar la turbidez de las sombras.

BoxDecoration(
  color: Colors.grey[300],
  borderRadius: BorderRadius.circular(50),
  boxShadow: [
    // Shadow for top-left corner
    const BoxShadow(
      color: Colors.grey,
      offset: Offset(10, 10),
      blurRadius: 6,
      spreadRadius: 1,
    ),
    // Shadow for bottom-right corner
    const BoxShadow(
      color: Colors.white12,
      offset: Offset(-10, -10),
      blurRadius: 6,
      spreadRadius: 1,
    ),
  ]
),

Nota: Aquí Offset(+ve, +ve) significa esquina inferior izquierda, mientras que Offset(-ve, -ve) significa esquina superior derecha para la posición de la sombra.

Código completo:

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(
      home: const NeumorphicDesign(),
    );
  }
}
  
class NeumorphicDesign extends StatelessWidget {
  const NeumorphicDesign({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 200,
        width: 200,
        padding: EdgeInsets.all(8),
        child: Image.asset(
          "assets/gfg.png",
        ),
        decoration: BoxDecoration(
          color: Colors.grey[300],
          borderRadius: BorderRadius.circular(50),
          boxShadow: [
            const BoxShadow(
              color: Color(0xFFBEBEBE),
              offset: Offset(10, 10),
              blurRadius: 30,
              spreadRadius: 1,
            ),
            const BoxShadow(
              color: Colors.white,
              offset: Offset(-10, -10),
              blurRadius: 30,
              spreadRadius: 1,
            ),
          ]
        ),
      ),
    );
  }
}

Producción:

 

Entonces, en este artículo, vimos cómo podemos darle un estilo neumórfico a Flutter Container para crear mejores elementos de interfaz de usuario.