Skip to content

Instantly share code, notes, and snippets.

@Hitesh822

Hitesh822/neumorphism.dart

Created May 17, 2020 19:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Hitesh822/496381e99990dac5c357a6d0571c0c4b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Hitesh822/496381e99990dac5c357a6d0571c0c4b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Hitesh822 revised this gist May 17, 2020. No changes.
  2. Hitesh822 created this gist May 17, 2020.
    254 changes: 254 additions & 0 deletions neumorphism.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,254 @@
    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
    ),
    ]
    ),
    ),
    );
    }
    }