Flutter Neumorphism Easy Explanation

neumorphism.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blueGrey[200],
        body: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Center(
            child: Row(
              children: <Widget>[
                SizedBox(width: 20,),
                //raised container
                Container(
                  height: 100,
                  width: 100,
                  decoration: raised,
                ),
                SizedBox(width: 20,),
                //sunken container
                Container(
                  height: 100,
                  width: 100,
                  decoration: sunken,
                ),
                SizedBox(width: 20,),
                //convex container
                Container(
                  height: 100,
                  width: 100,
                  decoration: convex,
                ),
                SizedBox(width: 20,),
                //concave container
                Container(
                  height: 100,
                  width: 100,
                  decoration: concave,
                ),
                SizedBox(width: 20,),
                //groove effect 1 
                neuTextField1(),
                SizedBox(width: 20,),
                //groove effect 2 
                neuTextField2(),
                SizedBox(width: 20,),
              ],
            ),
          ),
        ),
      )
    );
  }

  // raised effect
  final BoxDecoration raised = BoxDecoration(
    color: Colors.blueGrey[200],
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 3,
        spreadRadius: 0,
        offset: Offset(3, 3)
      ),
      BoxShadow(
        color: Colors.white.withOpacity(0.5),
        blurRadius: 3,
        spreadRadius: 0,
        offset: Offset(-3, -3)
      )
    ]
  );

  //sunken effect
  final BoxDecoration sunken = BoxDecoration(
    color: Colors.blueGrey[200],
    borderRadius: BorderRadius.circular(15),
    boxShadow: [
      BoxShadow(
        color: Colors.white.withOpacity(0.3),
        blurRadius: 3,
        spreadRadius: 0,
        offset: Offset(3, 3)
      ),
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 3,
        spreadRadius: 0,
        offset: Offset(-3, -3)
      ),
    ]
  );

  // convex effect
  final BoxDecoration convex = BoxDecoration(
    borderRadius: BorderRadius.circular(50),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 6,
        spreadRadius: 0,
        offset: Offset(3, 3)
      ),
      BoxShadow(
        color: Colors.white.withOpacity(0.4),
        blurRadius: 6,
        spreadRadius: 0,
        offset: Offset(-3, -3)
      )
    ],
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Colors.blueGrey[200].withOpacity(0.2),
        Colors.blueGrey[200].withOpacity(0.4),
        Colors.blueGrey[200].withOpacity(0.6),
        Colors.blueGrey[200].withOpacity(0.8),
        Colors.blueGrey[200],
      ],
    )
  );

  //concave effect
  final BoxDecoration concave = BoxDecoration(
    borderRadius: BorderRadius.circular(50),
    // color: Colors.blueGrey[200],
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        blurRadius: 6,
        spreadRadius: 0,
        offset: Offset(6, 6)
      ),
      BoxShadow(
        color: Colors.white.withOpacity(0.1),
        blurRadius: 6,
        spreadRadius: 0,
        offset: Offset(-6, -6)
      ),
    ],
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Color.lerp( Colors.blueGrey[200], Colors.black, 0.2),
        Colors.blueGrey[200],
        Color.lerp( Colors.blueGrey[200], Colors.white, 0.2),
      ],
    )
  );

  // groove effect 1
  Widget neuTextField1(){
    return Container(
      height: 60,
      width: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15),
        border: Border.all(color: Colors.blueGrey[200], width: 5),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.2),
            blurRadius: 3,
            spreadRadius: 0,
            offset: Offset(3, 3)
          ),
          BoxShadow(
            color: Colors.white.withOpacity(0.5),
            blurRadius: 3,
            spreadRadius: 0,
            offset: Offset(-3, -3)
          ),
        ]
      ),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.blueGrey[200],
          borderRadius: BorderRadius.circular(12),
          boxShadow: [
            BoxShadow(
              color: Colors.white.withOpacity(0.3),
              blurRadius: 3,
              spreadRadius: 0,
              offset: Offset(3, 3)
            ),
            BoxShadow(
              color: Colors.black.withOpacity(0.2),
              blurRadius: 3,
              spreadRadius: 0,
              offset: Offset(-3, -3)
            ),
          ]
        ),
      ),
    );
  }

  // groove effect 2
  Widget neuTextField2(){
    return Container(
       padding: EdgeInsets.all(2),
       height: 60,
       width: 200,
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(15),
         border: Border.all(color: Colors.blueGrey[200], width: 5),
         boxShadow: [
           BoxShadow(
             color: Colors.white.withOpacity(0.5),
             offset: -Offset(3, 3),
             blurRadius: 3,
             spreadRadius: 0
           ),
           BoxShadow(
             color: Colors.black.withOpacity(0.1),
             offset: Offset(3, 3),
             blurRadius: 3,
             spreadRadius: 0
           ),
         ],
       ),
       child: DecoratedBox(
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(10),
           color: Colors.blueGrey[200],
           boxShadow: [
             BoxShadow(
               color: Colors.black.withOpacity(0.1),
               offset: Offset(3, 3),
               blurRadius: 3,
               spreadRadius: 0
             ),
             BoxShadow(
               color: Colors.black.withOpacity(0.1),
               offset: -Offset(3, 3),
               blurRadius: 3,
               spreadRadius: 0
             ),
           ]
         ),
       ),
     );
  }
}